aspect-ratio

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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

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

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

Specificações

Specification Status Comment
Media Queries Level 4
The definition of 'aspect-ratio' in that specification.
Candidata a Recomendação No change.
Media Queries
The definition of 'aspect-ratio' in that specification.
Recomendação Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support