Współczynnik proporcji, czyli aspect-ratio w CSS


3 lutego 2021 / Michał Kortas


Nie tak dawno temu, bo w styczniu 2021 roku, pojawiło się w przeglądarkach Chrome i Edge wsparcie dla właściwości CSS, pozwalającej ustanowić współczynnik proporcji dla elementów HTML. Poniższym tekstem pozwolę sobie opisać to przydatne usprawnienie, czyli tzw. aspect-ratio.

Czym jest aspect-ratio, czyli współczynnik proporcji?

W dużym skrócie jest to właściwość opisująca stosunek szerokości do wysokości danego elementu. Dzięki niej, znając jeden z dwóch wymiarów ( width lub height), możemy łatwo dostosować brakujący wymiar tak, aby był spójny z założeniami proporcjonalności naszego interfejsu.

Jak działa właściwość aspect-ratio?

Aby lepiej zobrazować działanie właściwości aspect-ratio i empirycznie doświadczyć skutków jakie za sobą niesie, przygotowałem niewielkie demo wg poniższej specyfikacji.

Zobacz właściwość aspect-ratio w przykładzie on-line

Klasy opisujące elementy wg wybranego współczynnika proporcji są następujące.

Przypisując je do elementów, takich jak np. ten:

Otrzymamy następujący efekt.

Współczynnik proporcji, aspect-ratio w CSS

Współczynnik proporcji, aspect-ratio w CSS

Łatwo zauważyć, że w powyższych przykładach wysokość poszczególnych elementów została automatycznie dostosowana do zadanej proporcji, wykorzystując wyłącznie szerokość. Widać to bardzo dobrze przy skalowaniu okna przeglądarki. Wymiary dopasowują się automatycznie, nie gubiąc zadanego ratio.

Responsywność i aspect-ratio

Responsywność i aspect-ratio

Współczynnik proporcji na przykładzie galerii

Możliwości jakie niesie ze sobą właściwość aspect-ratio można wykorzystać np. w galeriach zdjęć bądź szczególnie w galeriach wideo.

Umieszczę teraz zdjęcia w elementach .box zdefiniowanych w powyższym przykładzie. Dzięki opcji object-fit: cover  damy im za zadanie dopasować się do kontenerów, w których się znajdują.

Tak powyższy przykład prezentuje się w przeglądarce.

Zobacz galerię zdjęć uwzględniającą właściwość aspect-ratio

Widok galerii zdjęć względem współczynnika proporcji aspect-ratio

Widok galerii zdjęć względem współczynnika proporcji aspect-ratio

Wykorzystywanie aspect-ratio w Media Queries

Właściwość aspect-ratio może przyjmować przedrostki min-  i max-, co daje nam możliwość używania jej w @media().

Zobacz przykład aspect-ratio z przedrostkami użytymi w Media Queries

W zależności od proporcji ekranu możemy stosować zupełnie inne style.

Czekam z niecierpliwością na implementację współczynnika proporcji w innych przeglądarkach, aby raz na zawsze zapomnieć o mało zrozumiałych (np. ustawianie procentowego padding-top) sztuczkach do zapewnienia elementom proporcjonalnego wyglądu.

Linki do przykładów

  1. Proporcje na przykładach
  2. Galeria zdjęć
  3. Style zależne od @media

Tagi:


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *