Propriedade aspect-ratio CSS

Definição e uso

aspect-ratio A propriedade permite que você defina a proporção entre largura e altura do elemento.

Se configurado aspect-ratio e width A altura será ajustada conforme a proporção de largura e altura definida.

Para entender melhor aspect-ratio Veja a demonstração.

Dica:Uso em layout responsivo aspect-ratio Essa propriedade, quando o tamanho do elemento muda frequentemente, você deseja manter a proporção entre largura e altura.

Exemplo

Exemplo 1

Adicionar uma proporção de largura e altura ao elemento:

div {
  aspect-ratio: 3 / 2;
}

Experimente você mesmo

Exemplo 2

Se o tamanho do elemento div precisar mudar,aspect-ratio Essa propriedade é muito adequada para controlar a proporção de largura e altura do elemento div. Por exemplo, em uma biblioteca de imagens, você deseja que o tamanho do elemento div seja flexível para se adaptar a todos os dispositivos, mas ao mesmo tempo manter a proporção de largura e altura das imagens:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

Experimente você mesmo

Sintaxe do CSS

aspect-ratio: number/number|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Páginas relacionadas

Tutorial:Módulo de layout de grade do CSS

Referência:Propriedade Object-fit do CSS

Referência:Propriedade Object-position do CSS