Propriedade aspect-ratio

A propriedade aspect-ratio define o alinhamento de elementos ao longo do eixo transversal para blocos flex e ao longo do eixo horizontal para grids. Aplica-se ao elemento pai.

Sintaxe

seletor {
	aspect-ratio: auto ou proporção;
}

Valores

Valor	Descrição
`auto`	O elemento não tem uma proporção de aspecto preferida e o navegador a define automaticamente, com base na largura e altura do elemento.
`proporção`	A proporção é escrita como `16/9`, aqui o primeiro número é a largura e o segundo número é a altura. Se algum valor não for especificado, é considerado igual a `1`. Também algumas proporções podem ser escritas com um único número. Por exemplo, `2/1` pode ser escrito como `0.5`, isso dará o mesmo resultado.
`auto && proporção`	Se a proporção de aspecto vier junto com a palavra-chave `auto` (exemplo: `auto` `1/2`), será escolhida a proporção especificada, mas para elementos substituídos (como imagens e vídeos) com sua própria proporção de aspecto, somente ela será usada.

Exemplo

Vamos definir a proporção de aspecto automática para o botão:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

Exemplo

Agora vamos definir a proporção de aspecto para o botão como 1/2:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

Veja também

a propriedade object-fit,
que dimensiona elementos