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: