# Propriedade aspect-ratio no CSS

> Neste drop dou detalhes sobre a propriedade CSS aspect-ratio, seu propósito e também dicas de uso.

- Canonical: https://betomuniz.com/blog/propriedade-aspect-ratio-no-css
- Published: 2021-01-29
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt
- Tags: CSS, Performance, HTML

---

A nova propriedade CSS `aspect-ratio` introduz a **todos** os elementos no HTML a possibilidade de dimensionamento automático.

```css
.square { aspect-ratio: 1 / 1; }

.rectangle { aspect-ratio: 3 / 1; }

.video { aspect-ratio: 16 / 9; }

.ultrawide { aspect-ratio: 21 / 9; }

.intrinsicsize { 
  aspect-ratio: attr(width) / attr(height);
}
```

Sem a propriedade CSS `aspect-ratio`, somente alguns elementos possuem cálculo automático de dimensionamento.

Por exemplo a tag `<img />` , que quando possui pelo menos o valor de `width`  explicitamente configurado, implicitamente pode calcular o valor de `height`  e vice-versa.

Agora até mesmo a tag `<div>`  pode apresentar esse tipo comportamento de auto dimensionamento.

Além disso, a nova propriedade CSS `aspect-ratio`  facilita a criação de interfaces responsivas

E também adoção de boas práticas no uso de imagens na web, pois permite redimensionar precisamente uma imagem baseada na taxa de proporção original dela, assim como otimiza as métricas de performance no [_Lighthouse_](https://developers.google.com/web/updates/2017/10/lighthouse#aspect)[ ao não adotar imagens desproporcionais](https://developers.google.com/web/updates/2017/10/lighthouse#aspect).

O suporte atual é fornecido no Chrome 88, e o Safari também já disse que irá implementar logo. Firefox e Edge vão na mesma direção do Safari.