Aspect Ratio w CSS

Teoria i wsparcie przeglądarek

Aspect ratio wg Wikipedii:

Stosunek – ilorazowe odniesienie jednej wartości do drugiej, które ma na celu wskazanie tożsamości lub względnej różnicy rozmiarów dwóch wielkości. Zwykle zapisywane jest często w postaci ułamka lub przy użyciu znaku dzielenia; innym sposobem jest zapis procentowy, w którym daną wielkość odnosi się do stu (łac. per centum, „na sto”). Stosuje się też inne sposoby zapisu bezwymiarowego stosunku dwóch wielkości. Stosunek jest częścią proporcji.

Wikipedia, 24.06.2021

W projektowaniu stron internetowych pojęcie proporcji jest używane do opisania, że ​​szerokość i wysokość obrazu powinny być proporcjonalne do siebie.

Aspect ratio w CSS nie jest nowością, jednak do tej pory deweloperzy Internet Explorer oraz Safari nie wdrożyli tego rozwiązania. Czy i kiedy nastąpi wsparcie, nie wiadomo (stan: 24.06.2021).

Pomiar proporcji

W celu określenia proporcji, musimy podzielić szerokość przez wysokość. Wtedy otrzymamy wartość proporcji, co przedstawiłem na poniższej grafice:

Aspect ratio w CSS

Określenie współczynnika proporcji w CSS jest również bardzo proste. Jak już wspomniałem wcześniej, nie wszystkie przeglądarki wspierają właściwość aspect-ratio w CSS. Należy zatem rozważyć 2 rozwiązania:

• aspect-ratio dla przeglądarek wspierających to rozwiązanie,
• padding-top dla wszystkich przeglądarek.

.figure {
  position: relative;
  padding-top: 75%;
}

.figure .figure__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Powyższy kod stanowi bazę do określania proporcji dla obrazka umieszczonego w kontenerze. W tym przypadku współczynnik wynosi 1.33 (czyli 4/3).

Dla innych, typowych współczynników wartości padding-top zamieszczam poniżej:

.figure {
  position: relative;
}
.figure--4-3 {
  padding-top: 75%;
}
.figure--16-9 {
  padding-top: 56.25%;
}
.figure--2-1 {
  padding-top: 50%;
}
.figure--1-1 {
  padding-top: 100%;
}

Przyjrzyjmy się zatem jak to działa w praktyce. Przygotowałem prosty przykład działania:

dark