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

Właściwość aspect-ratio umożliwia zdefiniowanie pożądanej szerokości do wysokości elementu znajdującego się w kontenerze, polu. W praktyce umożliwia nam to dostosowywanie się zawartości w obszarze do wymiarów przeglądarki. Być może wydaje się to na początku mało użyteczne jednak trzeba pamiętać, że w dzisiejszych czasach strony wyświetlamy na różnej wielkości urządzeniach.

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

Możemy więc uznać, że aspect-ratio to właściwość pomagająca nam dobrać proporcje pomiędzy wysokością a szerokością elementu. Daje nam to możliwość dostosowania do siebie elementów pod względem wysokości (height) lub szerokości (width). Drugi wymiar nie jest nam potrzebny.

Jak działa aspect-ratio?

Chwilowo prawdopodobnie trochę brzmi to jak czarna magia. Jednak z pewnością mijaliście już z nim do czynienia. Dlatego przejdźmy do praktyki czyli przykładów:

Podstawowe style dla powyższych kontenerów są takie same. Posiadają one jednak inny współczynnik proporcji. Dla powyższych przykładów wygląda on następująco:

.ratio-1-1 {
    aspect-ratio: 1 / 1;
}
.ratio-1-2 {
    aspect-ratio: 1 / 2;
}
.ratio-4-3 {
    aspect-ratio: 4 / 3;
}
.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

Przyjmowane wartości przez aspect-ratio

Do najczęściej przyjmowanych wartości należą

/* kluczowe wartości */aspect-ratio: auto; /* domyślna*/
/* Wartości współczynnika */aspect-ratio: 1 / 1; /* szerokość i wysokość mają równe proporcje */aspect-ratio: 2 / 1; /* szerokość jest dwa razy większa od wysokości */aspect-ratio: 1 / 2; /* szerokość jest połową wysokości */aspect-ratio: 16 / 9  /* typowy współczynnik proporcji wideo */aspect-ratio: auto 4 / 3; /* width:height, chyba że jest to element zastępczy */aspect-ratio: 0.5; /* float value */
/* Wartości globalne */aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

• auto: Jest to wartość domyślna, czyli bazowa. Obiekty z nią posiadają swoje naturalne proporcje.
• <ratio>: Dwie dodatnie liczby rozdzielone ukośnikiem (/) z odstępem lub bez, określające szerokość oraz wysokość elementu. W przypadku pojedynczej wartości, druga wartość automatycznie uznawana jest za 1. Obliczenia rozmiaru obejmujące preferowany współczynnik proporcji działają z wymiarami pola określonymi przez box-sizing.
• initial: Stosuje domyślne ustawienie właściwości, które jest auto.
• heritage: Przyjmuje wartość współczynnika proporcji elementu nadrzędnego.
• unset: Usuwa bieżący współczynnik proporcji z elementu.

aspect-ratio i grafika w kontenerze

Z pomocą aspect-ratio możemy także ustawiać grafiki / zdjęcia w kontenerze. Tak by lepiej wpasowywały się one do strony.

źródło:

• https://webroad.pl/html5-css3/7894-wspolczynnik-proporcji-czyli-aspect-ratio-w-css
• https://css-tricks.com/almanac/properties/a/aspect-ratio/