Beto Muniz

Propriedade aspect-ratio no CSS

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

.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 ao não adotar imagens desproporcionais.

⚡️ 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.

Gostou? Assine meu canal no Telegram.