Manter aspect ratio de uma div com CSS

164d atrás

Ion

---

0 0

No #CSS, temos a propriedade aspect-ratio, que pode ser aplicada a divs ou outros elementos para manter o aspect ratio, ou seja, a proporção entre largura e altura.

No seu HTML, basta adicionar o elemento que vai utilizar, como no exemplo:

<div></div>

Agora é adicionar os estilos CSS:

div {
    aspect-ratio: 3 / 1;
background-color: lightblue;
}

Dessa forma, a div estará sempre com uma proporção 3 / 1, por exemplo, a largura será 3 vezes maior que a altura.