entender a proporção de tela com aspect-ratio

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

Em outras palavras, essa propriedade nos ajuda a dimensionar elementos de forma consistente, de modo que a proporção de um elemento permaneça a mesma à medida que cresce ou diminui.

aspect-ratioé definido na especificação CSS Box Sizing Module Level 4 , que está atualmente em Working Draft. Isso significa que ainda está em andamento e tem chance de mudar. 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

Em inglês simples: aspect-ratioé assumido como autopadrão ou aceita a <ratio>como um valor onde <width / height>.

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

Valores

  • auto: o valor padrão, que especifica que o elemento não tem proporção preferencial e deve se dimensionar normalmente. Portanto, elementos substituídos, como imagens com uma proporção intrínseca, usam essa proporção.
  • <ratio>: dois valores numéricos positivos separados por uma barra ( /) com ou sem espaço ao redor deles, visando a largura e a altura do elemento. No caso de um único valor, o segundo valor é considerado 1. Os cálculos de tamanho que envolvem a proporção de aspecto preferida funcionam com as dimensões da caixa especificada por box-sizing.
  • initial: aplica a configuração padrão da propriedade, que é auto.
  • inherit: Adota o aspect-ratiovalor do pai.
  • unset: remove a proporção atual do elemento.

pode receber dois valores

Esta propriedade pode assumir dois valores ao mesmo tempo, sendo um auto, e o outro um <ratio>:

Se ambos auto e a <ratio>forem especificados juntos, a proporção preferencial será a proporção especificada de largura dividida pela altura, a menos que seja um elemento substituído com uma proporção intrínseca, caso em que essa proporção será usada.

Como você pode ver na demonstração a seguir, os mesmos valores são definidos para um div e um <img>(um elemento substituído), o elemento div está usando o <ratio>e se torna um quadrado, mas a imagem segue sua proporção intrínseca. Se você remover auto dos valores, poderá ver que a imagem é forçada a ser um quadrado:

Visualize essa propriedade em ação no codepen a seguir com o código exemplo.

com o html

e com o css

Funciona em 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 em imagens?” a resposta é: absolutamente . Os navegadores fazem alguns cálculos sofisticados de proporção em conteúdo substituído, como imagens.

Portanto, se uma imagem tiver, 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 as quais trabalhamos, como divs. Em vez de tentar manter as proporções naturais do elemento, aspect-ratiodefina um dimensionamento “preferido”.

Agora, a especificação atualmente observa que as especificações CSS mais antigas, principalmente 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 à medida que ele evolui.

Ele funciona por conta própria sem especificar um widthouheight

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

…e o padrão do elemento width: autoentra em ação implicitamente para definir as dimensões do elemento.

E para visualizar esse código, pode acessar no codepen

Muda quando widthou heightestão no mesmo elemento

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

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 width, ele diz aspect-ratiopara calcular a caixa de proporção do elemento usando 300pxcomo largura. Como resultado, é como se tivéssemos escrito:

Isso faz sentido! Lembre-se, quando não widthou heightsão especificados, o navegador assume que são autoe vai a partir daí. widthQuando fornecemos valores e explícitos height, é isso que é usado.

É 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 um width ou height um elemento e afetará o cálculo de aspect-ratio. Mas se o elemento já tiver awidth e height, eles serão usados ​​em vez de aspect-ratio. Requer que ambas as propriedades sejam substituídas aspect-ratio; definir height ou width sozinho não quebrará a proporção do elemento.

aspect-ratioé ignorado quando ambos widthe heightsão definidos no mesmo elemento.

Faz senes, certo? Se usar um widthou heightforçar o aspect-ratiouso desse valor no cálculo, segue-se logicamente que o uso de ambos substituiria aspect-ratiocompletamente completamente, pois 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 e o conteúdo for tão longo que force o elemento a se expandir, 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 “preferida”. É preferível, mas não prescrito.

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

E para visualizar esse código, pode acessar no codepen

Quando “perde” para min-*e max-*propriedades

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

Isso ocorre porque todas as propriedades min-*e max-*normalmente lutam widthe heightpela supremacia na guerra sobre os cálculos do Box Model. Por exemplo:

Mas:

Isso porque min-widthestá impedindo widthde ficar abaixo de um valor específico ou é ignorado porque o widthset já definiu o elemento além da largura mínima que precisa ser. 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-ratio e eles “ganharem” widthou height, eles substituirão aspect-ratio. Disse-te que era um pouco alucinante. 🤯

Casos de uso

Elementos substituídos, como imagens ou vídeos, já têm uma proporção intrínseca, portanto, quando aumentam ou diminuem, mantêm sua proporção, mas os elementos não substituídos não têm esse luxo e às vezes você precisa desse comportamento para eles.

Aqui estão alguns exemplos em que a proporção se torna útil.

iframes responsivos

Um caso de uso muito comum é quando você deseja incorporar um iframe para exibir um vídeo de outro site como o YouTube. Nesse caso, se você definir a largura para 100% e definir uma altura, o vídeo será deformado.

Para ter um iframe responsivo que preserve sua proporção, você pode fazer o seguinte:

E para visualizar esse código, pode acessar no codepen

Se o iframe tiver atributos de largura e altura definidos assim:

…então você pode definir automaticamente aspect-ratioassim:

Imagens de heróis

Definir uma imagem de fundo para um elemento não afeta o tamanho desse elemento. Então, para criar uma imagem hero, se a imagem estiver em segundo plano, você precisa definir uma altura no elemento e ter uma altura fixa não é muito responsivo!

Aqui você pode usar a propriedade de proporção para ter um herói que preserve a proporção de sua imagem de fundo:

E para visualizar esse código, temos o link do codepen a seguir

Consistência em um layout de grade

Imagine, em um layout de flexbox ou grade com mecanismo de preenchimento automático, você pode querer que os itens permaneçam quadrados, mas a largura e a altura dos itens podem diminuir ou aumentar com base no conteúdo ou no tamanho do pai e, como resultado, é mais provável que os itens não não fique quadrado.

Definir proporção de aspecto para 1/1 altera a altura dinamicamente enquanto a largura do seu item é dimensionada:

Na galeria de imagens a seguir, como as imagens têm tamanhos aleatórios, a propriedade aspect-ratio é usada para manter sua altura consistente. Remova a proporção na lista de itens e veja o efeito.

Além disso, com o uso de object-fit, você pode ajustar as imagens nas dimensões corretas.

Esse conteúdo é muito interessante mas fica ainda melhor se você aplicar isso. Sugiro e muito criar uma aplicação simples ai, e ir implementando as propriedades para visualizar o comportamento.

Para escrever esse artigo, utilizei o link a seguir para entender essa propriedade.

Espero que tenha gostado. Deixe o seu aplauso e até o próximo artigo.

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store