css
Czy wiesz, czym jest aspect-ratio i jak go używać?
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
Podobne wpisy
