css

Czy wiesz, czym jest aspect-ratio i jak go używać?

3 listopada 2023

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

Najnowsze wpisy