A propriedade aspect-ratio do CSS

A propriedade CSS que ajuda a manter o espaçamento em layouts responsivos.

Una Kravets

Observação : Resumo: manter uma proporção consistente entre largura e altura, chamada de proporção, é fundamental no Web design responsivo e para evitar a mudança de layout cumulativa. Agora, há uma maneira mais simples de fazer isso com a nova propriedade aspect-ratio lançada no Chromium 88, Firefox 87 e Safari Technology Preview 118.

Proporção

Browser Support

• 88
• 88
• 89
• 15

Source

O índice de proporção é mais comumente expresso como dois números inteiros e dois pontos nas dimensões de: largura:altura ou x:y. As proporções mais comuns para fotografia são 4:3 e 3:2, enquanto vídeos e câmeras de consumo mais recentes tendem a ter uma proporção de 16:9.

Duas imagens com a mesma proporção. Uma tem 634 x 951 pixels, e a outra tem 200 x 300 pixels. Ambos têm uma proporção de 2:3.

Com o surgimento do design responsivo, manter a proporção se tornou cada vez mais importante para desenvolvedores da Web, principalmente porque as dimensões das imagens e os tamanhos dos elementos mudam com base no espaço disponível.

Alguns exemplos de situações em que é importante manter a proporção:

• Criar iframes responsivos, em que eles têm 100% da largura de um elemento pai, e a altura permanece uma proporção específica da janela de visualização.
• Criar contêineres de marcador de posição intrínsecos para imagens, vídeos e incorporações para evitar um novo layout quando os itens forem carregados e ocuparem espaço
• Criar um espaço uniforme e responsivo para visualizações interativas de dados ou animações SVG
• Criar espaço uniforme e responsivo para componentes com vários elementos, como cards ou datas de calendário
• Criar espaço uniforme e responsivo para várias imagens de dimensões variadas (pode ser usado com object-fit)

Object-fit

Definir uma proporção ajuda a dimensionar a mídia em um contexto responsivo. Outra ferramenta nesse grupo é a propriedade object-fit, que permite aos usuários descrever como um objeto (como uma imagem) em um bloco deve preencher esse bloco:

Mostrando vários valores de object-fit. Confira a demonstração no Codepen.

Os valores initial e fill reajustam a imagem para preencher o espaço. No nosso exemplo, isso faz com que a imagem fique achatada e desfocada, já que ela reajusta os pixels. Não é o ideal. O object-fit: cover usa a menor dimensão da imagem para preencher o espaço e corta a imagem para caber nele com base nessa dimensão. Ele "aumenta" no limite mais baixo. object-fit: contain garante que toda a imagem esteja sempre visível. Portanto, é o oposto de cover, em que ele usa o tamanho da maior borda (no exemplo acima, é a largura) e redimensiona a imagem para manter a proporção intrínseca enquanto se encaixa no espaço. O caso object-fit: none mostra a imagem cortada no centro (posição padrão do objeto) no tamanho natural.

O object-fit: cover tende a funcionar na maioria das situações para garantir uma interface uniforme ao lidar com imagens de dimensões variadas. No entanto, você perde informações dessa forma (a imagem é cortada nas bordas mais longas).

Se esses detalhes forem importantes (por exemplo, ao trabalhar com uma foto de produtos de beleza), não é aceitável cortar conteúdo importante. Portanto, o cenário ideal seria ter imagens responsivas de tamanhos variados que se encaixem no espaço da interface sem serem cortadas.

O truque antigo: manter a proporção com padding-top

Usar padding-top para definir uma proporção de 1:1 nas imagens de visualização de postagens em um carrossel.

Para tornar esses elementos mais responsivos, podemos usar a proporção. Isso permite definir um tamanho de proporção específico e basear o restante da mídia em um eixo individual (altura ou largura).

Uma solução entre navegadores bem aceita para manter a proporção com base na largura de uma imagem é conhecida como "Padding-Top Hack". Essa solução exige um contêiner principal e um contêiner filho posicionado de forma absoluta. Em seguida, calcule a proporção como uma porcentagem para definir como padding-top. Exemplo:

• Proporção 1:1 = 1 / 1 = 1 = padding-top: 100%
• Proporção de 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Proporção 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Proporção de 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Agora que identificamos o valor da proporção, podemos aplicá-lo ao contêiner principal. Veja o exemplo a seguir:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Em seguida, podemos escrever o seguinte CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Manter a proporção com aspect-ratio

Como usar aspect-ratio para definir uma proporção de 1:1 nas imagens de visualização de postagens em um carrossel.

Infelizmente, calcular esses valores de padding-top não é muito intuitivo e exige alguma sobrecarga e posicionamento adicionais. Com a nova propriedade CSS aspect-ratiointrínseca, a linguagem para manter as proporções fica muito mais clara.

Com a mesma marcação, podemos substituir: padding-top: 56.25% por aspect-ratio: 16 / 9, definindo aspect-ratio como uma proporção especificada de width / height.

Como usar padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

Como usar a proporção

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Usar aspect-ratio em vez de padding-top é muito mais claro e não revisa a propriedade de padding para fazer algo fora do escopo usual.

Essa nova propriedade também adiciona a capacidade de definir a proporção como auto, em que "elementos substituídos com uma proporção intrínseca usam essa proporção; caso contrário, a caixa não tem uma proporção preferida". Se auto e <ratio> forem especificados juntos, a proporção de tela preferida será a proporção especificada de width dividida por height, a menos que seja um elemento substituído com uma proporção de tela intrínseca. Nesse caso, essa proporção será usada.

Exemplo: consistência em uma grade

Isso funciona muito bem com mecanismos de layout CSS, como a grade CSS e o Flexbox. Considere uma lista com filhos que você quer manter em uma proporção de 1:1, como uma grade de ícones de patrocinadores:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Imagens em uma grade com o elemento pai em várias dimensões de proporção. Confira a demonstração no Codepen.

Exemplo: evitar mudanças de layout

Outro ótimo recurso do aspect-ratio é que ele pode criar um espaço de marcador de posição para evitar o Cumulative Layout Shift e oferecer melhores Web Vitals. Neste primeiro exemplo, o carregamento de um recurso de uma API, como Unsplash, cria uma mudança de layout quando a mídia termina de carregar.

Vídeo da mudança de layout cumulativa que acontece quando nenhuma proporção é definida em um recurso carregado. Este vídeo foi gravado com uma rede 3G emulada.

Usar aspect-ratio, por outro lado, cria um marcador de posição para evitar essa mudança de layout:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Um vídeo com uma proporção definida é definido em um recurso carregado. Este vídeo foi gravado com uma rede 3G emulada. Confira a demonstração no Codepen.

Dica extra: atributos de imagem para proporção

Outra maneira de definir a proporção de uma imagem é usando atributos de imagem. Se você souber as dimensões da imagem com antecedência, é uma prática recomendada definir essas dimensões como width e height.

No exemplo acima, sabendo que as dimensões são 800 px por 600 px, a marcação de imagem seria assim: <img src="image.jpg" alt="..." width="800" height="600">. Se a imagem enviada tiver a mesma proporção, mas não necessariamente os mesmos valores de pixels, ainda poderemos usar os valores de atributo da imagem para definir a proporção, combinados com um estilo de width: 100% para que a imagem ocupe o espaço adequado. Tudo junto ficaria assim:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

No final, o efeito é o mesmo que definir o aspect-ratio na imagem via CSS, e o deslocamento cumulativo de layout é evitado (confira a demonstração no Codepen).

Conclusão

Com a nova propriedade CSS aspect-ratio, lançada em vários navegadores modernos, fica mais fácil manter proporções adequadas nos contêineres de mídia e layout.

Fotos de Amy Shamblen e Lionel Gustave via Unsplash.