CSS Aspect-ratio: Mantendo as proporções das imagens

Nesse artigo vamos abordar a propriedade CSS aspect-ratio. Ela pode ser importante e nem muita gente sabe da sua existência. Muito comum acessar alguns sites e redimensionar as janelas e ver as imagens se distorcendo ou perdendo a proporção. Isso acontece por que as imagens não preservam a sua proporção, assim começam a ficar achatadas.

Um exemplo de uma imagem sem CSS aspect-ratio.

Para resolver esse problema algumas vezes precisamos utilizar técnicas modificando o padding para manter a proporção das imagens. E se eu te falar que não é mais necessário cálculos complicados para manter a proporção das imagens.

Outro problema comum é deixar os iframes com vídeos do YouTube responsivos, sabe o que eu estou falando.

CSS aspect-ratio

A propriedade CSS aspect-ratio, nada mais é que a proporção da imagem expressa por 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ídeo e câmeras de consumo mais recentes tendem a ter uma proporção de 16:9.

Com design responsivo, a manutenção da proporção tem sido cada vez mais importante para os desenvolvedores da Web, principalmente quando precisamos adaptar as nossas imagens a diferentes telas.

Alguns exemplos de onde a manutenção da proporção se torna importante são:

Criação de iframes responsivos, onde eles são 100% da largura de um pai e a altura deve permanecer uma proporção específica da janela de visualização.
Criação de contêineres de espaço reservado intrínsecos para imagens, vídeos e incorporações para evitar re-layout quando os itens são carregados e ocupam espaço.
Criação de espaço uniforme e responsivo para visualizações interativas de dados ou animações SVG.
Criação de espaço uniforme e responsivo para componentes de vários elementos, como cartões ou datas de calendário.
Criação de espaço uniforme e responsivo para várias imagens de dimensões variadas (pode ser usado junto com o ajuste do objeto).

Exemplo prático do css aspect-ratio

Agora vamos a um exemplo prático do uso da propriedade CSS aspect-ratio aplicados a iframes responsivos:

.youtube {
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
}Code language: CSS (css)

Assim nos temos o nosso iframe responsivo mantendo a sua proporção. Como podemos ver nas imagens abaixo:

Como podemos ver, aspect-ratio css ajuda a manter a proporção da tag iframe assim dando uma melhor experiência para o usuário. Outra solução que podemos implementar é a combinação da propriedade css aspect ratio com a propriedade css object-fit.

Nesse caso temos uma imagem definindo a sua proporção 1/1 com aspect-ratio e o proprio card definindo a proporção 3 /4

CSS Object-fit

Object fit é uma propriedade que pode ser muito útil em imagens de cards que precisam cobrir uma área, específica. O que irá acontecer é que mudaremos o comportamento da exibição de uma imagem. Com essa propriedade as nossas imagens passarão a se comportar similares a imagens de background, mas com uma vantagem o browser saberá onde exibir, assim teremos uma melhor performance de carregamento.

Mas um ponto importante, o cálculo da imagem não será feito pelo elemento pai e sim pela própria imagem.

Valores aceitos pelo object-fit

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 borrada, pois reajusta os pixels. Nã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 “aproxima” no seu limite mais baixo. Ajuste de objeto: conter garante que toda a imagem esteja sempre visível, portanto, o oposto de cover, onde ele pega o tamanho do maior limite (no nosso exemplo acima é largura) e redimensiona a imagem para manter a sua proporção intrínseca enquanto se encaixa no espaço. O ajuste do objeto: nenhum caso mostra a imagem cortada no seu centro (posição padrão do objeto) no seu tamanho natural.

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

Se esses detalhes forem importantes (por exemplo, ao trabalhar com uma camada plana de produtos de beleza), cortar conteúdo importante não é aceitável. Portanto, o cenário ideal seriam imagens responsivas de tamanhos variados que se ajustassem ao espaço da interface do usuário sem cortes.

O que é aspect ratio CSS?

É a propriedade que permite controlar a proporção de elementos blocados. como divs, imagens e iframes

Como definir o aspect ratio no CSS?

aspect ratio pode ser definido através da propriedade aspect-ratio assim passando as proporções desejadas separadas por uma “/”

Qual é o suporte do aspect-ratio pelos navegadores?

Atualmente o suporte é de 90% dos principais navegadores, internet explorer 11(descontinuado pela microsoft) e Baidu browser não suportam esta propriedade.

Como eu defino com CSS o aspect-ratio de uma imagem?

Para definir a proporção da imagem sem distorcer a imagem, o melhor caminho é a combinação da propriedade aspect-ratio com object-fit.

Conclusão

Object-fit e CSS aspect-ratio podem ser duas propriedades muito interessantes se você está renderizando conteúdo dinamicamente. Muitas vezes fica a cargo do administrador realizar o upload da imagem no tamanho correto. Também podemos definir esta regra com uma linguagem back-end. Mas com essas propriedades podemos adicionar mais uma camada de segurançã.

Essa propriedade tem um suporte alto, um pouco mais de 90% dos navegadores suportam a propriedade. No meu canal do YouTube eu gravei um vídeo com mais detalhes sobre o assunto:

trabalhando com CSS aspect-ratio

Se gostou do post sobre css aspect ratio confira mais artigos relacionado ao assunto CSS aqui no blog:

Referência do post: https://web.dev/aspect-ratio/