aspect-ratio

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

A característica de mídia CSS aspect-ratio pode ser utilizada para testar a taxa de aspecto de sua viewport.

Sintaxe

A característica de aspect-ratio é especificada como um valor de <ratio> representando a relação de largura-para-altura em aspecto à sua viewport. É uma característica de diferencial, o que significa que você pode fazer uso de variações pré-fixadas de min-aspect-ratio e max-aspect-ratio para definir os os seus valores mínimos e máximos, respectivamente.

Exemplo

O exemplo abaixo está contido em um <iframe>, que cria o seu próprio viewport. Redimensione o <iframe> para ver o aspect-ratio em ação !

HTML

html
<div id="inner">
  Observe este elemento, conforme voc&ecirc; altera a largura e a altura da sua
  viewport.
</div>

CSS

css
/* Taxa de aspecto mínima */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* azul */
  }
}

/* Taxa de aspecto máxima */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* ciano */
  }
}

/* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* vermelho */
  }
}

Result

Especificações

Specification
Media Queries Level 4
# aspect-ratio

Compatibilidade com navegadores

BCD tables only load in the browser