Atrybut aspect-ratio w CSS

Definicja i użycie

aspect-ratio Atrybut pozwala na zdefiniowanie proporcji szerokości i wysokości elementu.

Jeśli ustawiono aspect-ratio i szerokość Atrybut, wysokość zostanie dostosowana do zdefiniowanej proporcji szerokości i wysokości.

Aby lepiej zrozumieć aspect-ratio Atrybut, zobacz prezentację.

Wskazówka:Używany w responsywnym układzie: aspect-ratio Atrybut, gdy rozmiar elementu często się zmienia, chcesz utrzymać proporcje szerokości i wysokości.

Przykład

Przykład 1

Dodaj proporcje szerokości i wysokości do elementu:

div {
  aspect-ratio: 3 / 2;
}

Spróbuj sam

Przykład 2

Jeśli rozmiar elementu div musi się zmieniać:aspect-ratio Atrybut jest bardzo odpowiedni do kontroli proporcji szerokości i wysokości elementu div. Na przykład, w bibliotece obrazów, chcesz, aby rozmiar elementu div był elastyczny, aby pasował do wszystkich urządzeń, ale jednocześnie utrzymywać proporcje szerokości i wysokości obrazu:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>ulica</div>
  <div>kwiaty przy ulicy</div>
  <div>góry</div>
  <div>Cinque Terre</div>
</div>

Spróbuj sam

CSS syntax

aspect-ratio: number/number|initial|inherit;

Wartość atrybutu

Techniczne szczegóły

Obsługa przeglądarek

Liczby w tabeli wskazują na wersję przeglądarki, która w pełni obsługuje tę właściwość.

powiązane strony

instrukcja:Moduł układu siatki CSS

odnośnik:Atrybut Object-fit w CSS

odnośnik:Atrybut Object-position w CSS