WDD 131: Fundamentos da Web Dinâmica

Proporção da Imagem

Visão Geral

A proporção de uma imagem é a relação proporcional entre sua largura e sua altura. É comumente expressa como dois números separados por dois-pontos, como em 16:9. Por exemplo, uma proporção de 16:9 significa que para cada 16 pixels de largura, há 9 pixels de altura.

Ao trabalhar com imagens na web, é importante considerar a proporção da imagem. Se você estiver usando uma imagem em um design responsivo, certifique-se de que a imagem seja dimensionada corretamente conforme o tamanho da janela de visualização muda. Se a proporção da imagem não for preservada, a imagem poderá ficar distorcida ou cortada de forma indesejada.

Problemas

Proporção é um teste dentro de uma auditoria de Melhores Práticas no Lighthouse.

Aqui está um exemplo de relatório do Lighthouse do DevTools em que uma imagem 🔺exibe uma proporção incorreta.

Como Consertar

Existem algumas maneiras de consertar uma proporção de tela incorreta:

• Use a declaração aspect-ratio em CSS para definir a proporção desejada usando a notação padrão, por exemplo, 16 / 9
• Use os atributos width e height no elemento <img> para especificar as dimensões da imagem em pixels que correspondem às dimensões intrínsecas/originais.
• Use a propriedade object-fit para especificar como o conteúdo do elemento <img> deve ser redimensionado para caber em seu contêiner.

  Aqui está um exemplo desse erro e uma solução usando CSS object-fit no CodePen ☼ object-fit