⌘K

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

cssseletor {
  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: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Exemplo

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

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Veja também

  • a propriedade object-fit,
    que dimensiona elementos
BackPropriedade resizeNextA propriedade object-fit