Niedawno w przeglądarkach pojawiło się wsparcie dla nowego atrybutu w CSS - aspect-ratio (caniuse). Jak nazwa sugeruje, służy on do określania proporcji elementu.

Przyjmuje on dwa parametry oddzielone ukośnikiem:

aspect-ratio: 1 / 2;

Określa on stosunek wysokości do szerokości obiektu. Dla podanego wyżej przykładu, jeżeli wysokość ustawimy na 100px to szerokość automatycznie ustawi się na 50px. Jeżeli w stylu zdefiniujemy wysokość i szerokość, wtedy atrybut aspect-ratio zostanie zignorowany.

Poniżej przykład, na którym można zaobserwować działanie omawianego parametru: https://codepen.io/Porkite/pen/xxPqyzR

💡 "Czy wiesz, że?" to wewnątrzfirmowa inicjatywa, której celem jest szerzenie ciekawostek z różnych obszarów IT. Najlepsze z nich trafiają na bloga dla szerszego grona odbiorców.