Relação de aspecto - CSS-Tricks

A propriedade CSS aspect-ratiopermite criar caixas que mantêm dimensões proporcionais onde o heighte widthde uma caixa são calculados automaticamente como uma proporção. É um pouco matemático, mas a ideia é que você pode dividir um valor por outro nesta propriedade e o valor calculado garante que a caixa permaneça nessa proporção.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioé definido na especificação CSS Box Sizing Module Nível 4, que está atualmente em Working Draft. Isso significa que ainda está em andamento e tem chance de alteração. Mas com o Chrome e o Firefox suportando-o por trás de uma bandeira experimental e o Safari Technology Preview adicionando suporte para ele no início de 2021, há fortes sinais de que aspect-ratioestá ganhando muito impulso.

Sintaxe

aspect-ratio: auto || ;

Em inglês simples: aspect-ratioé assumido como autopadrão ou aceita a como um valor where .

• Valor inicial: auto
• Aplica-se a: todos os elementos, exceto caixas embutidas e rubi interno ou caixas de mesa
• Herdado: não
• Porcentagens: n / a
• Valor calculado: palavra-chave especificada ou um par de números
• Tipo de animação: discreto

Valores

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Funciona com conteúdo substituído e não substituído

Se você está pensando, “Uhm, sim, o navegador já não faz isso para nós nas imagens?” a resposta é: absolutamente . Os navegadores fazem alguns cálculos de proporção de aspecto em conteúdo substituído, como imagens. Portanto, se uma imagem tem, digamos, uma largura de 500px, o navegador flexiona seus algoritmos de layout CSS para manter as dimensões intrínsecas ou “naturais” da imagem. A aspect-ratiopropriedade pode ser usada para substituir efetivamente essas dimensões naturais.

Mas o conteúdo não substituído não tem uma proporção natural. Essa é a maioria das coisas com que trabalhamos, como divs. Em vez de tentar manter as proporções naturais do elemento, aspect-ratiodefine um dimensionamento “preferido”.

Agora, a especificação atualmente observa que especificações CSS mais antigas, notavelmente CSS 2.1, não contêm uma distinção clara entre conteúdo substituído e não substituído. Isso significa que podemos ver alguns casos especiais adicionais adicionados à especificação para ajudar a esclarecê-los. Por enquanto, estamos vendo navegadores lançando suporte para definir proporções preferenciais em substituídos e não substituídos separadamente, onde alguns dos navegadores com suporte inicial por trás de um sinalizador experimental podem oferecer suporte apenas aspect-ratiopara conteúdo não substituído. Definitivamente, vale a pena ficar de olho no suporte do navegador conforme ele evolui.

Funciona sozinho, sem especificar um widthouheight

Então, sim, podemos simplesmente soltá-lo em um elemento como este:

.element ( aspect-ratio: 16 / 9; )

… E o padrão do elemento é width: autoativado implicitamente para definir as dimensões do elemento.

Ele muda quando widthou heightestão no mesmo elemento

Digamos que temos um elemento com largura de 300pxe aspect-ratiode 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Por natureza, aspect-ratiodeseja calcular as dimensões do elemento por conta própria e fará isso com base no contexto em que é usado. Mas com isso widthinserido, ele informa a proporção de aspecto para calcular a caixa de proporção de aspecto do elemento usando 300pxcomo largura. Como resultado, é como se tivéssemos escrito:

.element ( height: 100px; width: 300px; )

Isso faz sentido! Lembre-se, quando nenhum widthou heighté especificado, o navegador assume que sim autoe parte daí. Quando fornecemos valores widthe explícitos height, eles são usados.

É ignorado em algumas situações

É aqui que as coisas ficam um pouco confusas porque há casos em que aspect-ratioé negligenciado ou seus cálculos são afetados por outras propriedades. Isso inclui:

Quando ambos widthe heightsão declarados no elemento

Acabamos de ver como declarar widthou heightem um elemento afetará o cálculo de aspect-ratio. Mas se o elemento já tiver um widthe height, eles serão usados ​​no lugar de aspect-ratio. Requer que ambas as propriedades sejam substituídas aspect-ratio; definir um heightou outro widthsozinho não quebrará a proporção do elemento.

Faz senes, certo? Se o uso de widthou heightforça o aspect-ratioa usar esse valor no cálculo, segue-se logicamente que o uso de ambos sobrescreveria aspect-ratiocompletamente, uma vez que ambos os valores já foram fornecidos e definidos.

Quando o conteúdo sai da proporção

Simplificando, se você tiver um elemento com uma proporção de aspecto e o conteúdo for tão longo que force a expansão do elemento, o elemento se expandirá. E se o elemento se expande, suas dimensões mudam e, portanto, não há mais proporção. É por isso que a especificação diz que a propriedade define a proporção de aspecto “preferida”. É preferível, mas não prescrito.

Não gosta de como isso funciona? Definir min-height: 0;o elemento permitirá que o conteúdo ultrapasse a proporção de aspecto preferida em vez de expandi-la.

Quando "perde" para propriedades min-*emax-*

Nós meio que vimos como isso funciona, certo? Quando o conteúdo excede as dimensões da caixa, o aspect-ratiodesaparece efetivamente porque a caixa se expande com o conteúdo. Podemos substituir isso com min-width: 0.

Isso porque todo o min-*e max-*propriedades normalmente batalha widthe heightpela supremacia na guerra sobre cálculos Box modelo. Por exemplo:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Mas:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Isso porque min-widthestá impedindo widthde ir abaixo de um valor específico ou é ignorado porque o widthjá configurou o elemento além da largura mínima que ele precisa ter. A mesma coisa vale para min-height, max-width, e max-height.

O ponto de tudo isso: se definirmos a propriedade min-*ou max-*no mesmo elemento que aspect-ratioe eles “ganharem” widthou height, então esses serão substituídos aspect-ratio. Disse que era um pouco confuso. ?

Suporte de navegador

IE	Beira	Raposa de fogo	cromada	Safári	Ópera
Não	Não	86 1.2,3	90 4	TP 5	Não

Android Chrome	Android Firefox	Navegador Android	iOS Safari	Opera Mobile
Não	Não	Não	Não	Não

Mais Informações

Artigo em 1º de julho de 2020

Uma análise inicial da `proporção de aspecto`

Sara Cope