A nova propriedade CSS que ajuda a manter o espaçamento em layouts responsivos.
Proporção
A proporção costuma ser expressa como dois números inteiros e um sinal de 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 mais recentes tendem a ter uma proporção de 16:9.
Com o design responsivo, manter a proporção tem sido cada vez mais importante para desenvolvedores da Web, especialmente à medida que as dimensões da imagem são diferentes e os tamanhos dos elementos mudam com base no espaço disponível.
Confira alguns exemplos de quando a manutenção da proporção se torna importante:
- Criar iframes responsivos, em que eles representam 100% da largura de um pai, e a altura precisa permanecer uma proporção específica da janela de visualização.
- Criar contêineres intrínsecos de marcadores de posição 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 de dados interativas ou animações em SVG
- Criar um espaço uniforme e responsivo para componentes com vários elementos, como cartões ou datas de calendário
- Criar um espaço uniforme e responsivo para várias imagens de dimensões variáveis (pode ser usado com
object-fit).
Ajuste de objetos
A definição de uma proporção nos ajuda a dimensionar a mídia em um contexto responsivo. Outra ferramenta nesse
bucket é a propriedade object-fit, que permite que os usuários descrevam como um objeto (como uma imagem)
dentro de um bloco precisa preencher esse bloco:
object-fit. Confira a demonstração do Codepen.Os valores initial e fill reajustam a imagem para preencher o espaço. No nosso exemplo, isso faz
com que a imagem fique comprimida e desfocada, porque reajusta os pixels. Não é o ideal. object-fit: cover usa
a menor dimensão da imagem para preencher o espaço e corta a imagem para caber nela com base nessa
dimensão. Ele "aumenta o zoom" no limite mais baixo. object-fit: contain garante que toda a imagem
seja sempre visível. O oposto de cover, em que ele pega o tamanho do limite maior
(no nosso exemplo, acima disso é a largura) e redimensiona a imagem para manter a proporção intrínseca
enquanto se ajusta ao espaço. O caso de object-fit: none mostra a imagem cortada no centro (posição padrão do objeto) em seu tamanho natural.
object-fit: cover tende a funcionar na maioria das situações para garantir uma interface boa e uniforme ao lidar
com imagens de dimensões variadas. No entanto, você perde informações dessa maneira (a imagem é cortada
nas bordas mais longas).
Se esses detalhes forem importantes, por exemplo, ao trabalhar com uma camada plana de produtos de beleza, o corte de conteúdo importante não será aceitável. O cenário ideal seriam imagens responsivas de tamanhos variados que se encaixem no espaço da interface sem cortes.
A abordagem antiga: manter a proporção com padding-top
padding-top para definir uma proporção de 1:1 em imagens de pós-visualização em um carrossel.Para tornar isso mais responsivo, podemos usar a proporção. Isso nos 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 para diferentes navegadores atualmente aceita para manter a proporção com base na largura
de uma imagem é conhecida como "Padding-Top Hack". Essa solução requer um contêiner pai e um contêiner filho totalmente posicionado. Depois, calcula-se a proporção como uma porcentagem a ser definida
como padding-top. Exemplo:
- Proporção 1:1 = 1 / 1 = 1 =
padding-top: 100% - Proporção 4:3 = 3 / 4 = 0,75 =
padding-top: 75% - Proporção 3:2 = 2 / 3 = 0,66666 =
padding-top: 66.67% - Proporção 16:9 = 9 / 16 = 0,5625 =
padding-top: 56.25%
Agora que identificamos o valor da proporção, podemos aplicá-lo ao nosso contêiner pai. Confira o exemplo abaixo:
<div class="container">
<img class="media" src="..." alt="...">
</div>
Poderíamos, então, criar 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
aspect-ratio para definir a proporção de 1:1 em imagens de pós-visualização em um carrossel.Infelizmente, calcular esses valores de padding-top não é muito intuitivo e requer alguma
sobrecarga e posicionamento adicionais. Com a nova propriedade CSS intrínseca aspect-ratio, a linguagem para manter as proporções é 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.
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
O uso de aspect-ratio em vez de padding-top é muito mais claro e não reformula a propriedade de padding para fazer algo fora do escopo habitual.
Essa nova propriedade também adiciona a capacidade de
definir a proporção como auto, em que "os elementos substituídos por uma proporção intrínseca usam essa
proporção. Caso contrário, a caixa não terá uma proporção preferencial". Se auto e um <ratio> forem
especificados juntos, a proporção preferencial será a proporção especificada de width dividida por height, a menos que
seja um elemento substituído por
uma proporção intrínseca. Nesse caso, essa proporção será usada.
Exemplo: consistência em uma grade
Isso também funciona muito bem com mecanismos de layout CSS, como CSS Grid e Flexbox. Considere uma lista com filhos que você quer manter a proporção de 1:1, como uma grade de ícones de patrocinador:
<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;
}
Exemplo: impedir a mudança de layout
Outro ótimo recurso do aspect-ratio é que ele pode criar espaço de marcador de posição para evitar a
Mudança de layout cumulativa e oferecer Métricas da Web melhores. Neste primeiro
exemplo, carregar um recurso de uma API, como Unsplash, cria uma
mudança de layout quando a mídia termina de carregar.
O uso de aspect-ratio, por outro lado, cria um marcador para evitar essa mudança de layout:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
Dica bônus: atributos da imagem para proporção
Outra maneira de definir a proporção de uma imagem é usar os atributos de image. Se você já souber as dimensões da imagem, é uma prática recomendada
definir essas dimensões como width e height.
Para nosso exemplo acima, sabendo que as dimensões são 800 x 600 pixels, a marcação de imagem ficaria assim: <img src="image.jpg"
alt="..." width="800" height="600">. Se a imagem enviada tiver a mesma proporção, mas não necessariamente esses valores de pixel exatos, ainda poderemos usar valores de atributos de imagem para definir a proporção, combinados com um estilo de width: 100% para que a imagem ocupe o espaço adequado. Tudo isso ficaria assim:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
No final, o efeito é o mesmo que definir aspect-ratio na
imagem via CSS, e a mudança de layout cumulativa é evitada (veja a demonstração no
Codepen).
Conclusão
Com a nova propriedade CSS aspect-ratio, fazer lançamentos em vários navegadores modernos, mantendo as proporções
adequadas nos contêineres de mídia e layout, fica um pouco mais simples.
Fotos de Amy Shamblen e Lionel Gustave pelo Unsplash.