aspect-ratio
Ustala proporcje szerokości do wysokości elementu.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Dotyczy
- wszystkie elementy poza liniowymi niezastępowanymi i wewnętrznymi elementami tabel
- JavaScript
element.style.aspectRatio = "16 / 9"
Przykład
#.thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}<img class="thumbnail" src="/collections/covers/gry-do-nauki-programowania.webp" alt="" style="max-width: 360px; display: block;">Definicja i zastosowanie
#Właściwość aspect-ratio pozwala nadać elementowi stałe proporcje, na przykład 16 / 9 dla filmu albo 1 / 1 dla kwadratowego awatara. Wystarczy ustawić jeden wymiar, drugi przeglądarka wyliczy sama.
Zanim ta właściwość weszła do przeglądarek, proporcje uzyskiwano sztuczką z procentowym paddingiem. Dziś wystarczy jedna czytelna linijka.
Jeśli ustawisz jawnie oba wymiary, aspect-ratio zostanie zignorowane. Treść, która nie mieści się w wyliczonej wysokości, może też rozepchnąć element, chyba że dodasz overflow inne niż visible albo min-height: 0.
Składnia
#aspect-ratio: auto | <szerokość> / <wysokość>;Wartości
#Wartości w praktyce
#auto
.demo { aspect-ratio: auto; }1 / 1
.demo { aspect-ratio: 1 / 1; }16 / 9
.demo { aspect-ratio: 16 / 9; }3 / 4
.demo { aspect-ratio: 3 / 4; }Obsługa przeglądarek
#Szeroko dostępne · od 2021 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Połącz
aspect-ratiozobject-fit: cover, żeby zdjęcia o różnych proporcjach wyglądały w siatce jednolicie. - Ustaw proporcje miejsca na wideo lub reklamę z góry, a strona nie będzie skakać podczas ładowania.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.