03.02.2025

Escalonamento de Imagens em CSS: Mantendo Proporções

Resposta Rápida

Para ajustar perfeitamente uma imagem dentro de um contêiner, utilize as propriedades CSS max-width e max-height, configurando seus valores para 100%, e complete com object-fit: contain. Aqui está um exemplo de código:

<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="image.jpg" style="max-width: 100%; max-height: 100%; object-fit: contain;" alt="">
</div>

Essa abordagem preserva as proporções enquanto evita que a imagem ultrapasse os limites do contêiner.

Exploração Detalhada

Usando object-fit e object-position

Se você deseja que a imagem preencha toda a área do contêiner, utilize object-fit: cover. Para posicionamento, aplique object-position.

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Por outro lado, object-fit: scale-down irá reduzir a imagem, mantendo imagens menores em seu tamanho original.

Escalonamento de Imagens de Fundo

Exemplo de uso de uma imagem como fundo:

.bg-container {
  background-image: url('image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

background-size: contain permite que a imagem se ajuste ao contêiner, background-repeat: no-repeat impede que ela se repita, e background-position: center centraliza a imagem.

Verificação de Compatibilidade do Navegador

Certifique-se de verificar a compatibilidade da propriedade object-fit com os navegadores que seus usuários estão utilizando. Para o Internet Explorer, considere usar soluções alternativas com transform.

Layouts Responsivos

Sempre considere a responsividade e a proporção das imagens, especialmente ao trabalhar com diversos dispositivos e navegadores.

Experimentos Interativos

Pratique o uso de CSS e imagens em recursos como W3Schools.

Visualização

Vamos supor que temos um bloco div onde uma imagem precisa ser inserida:

Limites do Div: [ Proporção 16:9 ]
Imagem a Inserir: [ Qualquer tamanho ]

O uso da propriedade object-fit se parece com:

img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

Graças a isso, a imagem se encaixará perfeitamente no contêiner:

Antes: 🖼️💔🖼️ (tamanho não se encaixa)
Depois: 🖼️💙🖼️ (se encaixa perfeitamente)

Recursos Úteis

• Caixas de Proporção | CSS-Tricks — garantindo que as proporções da imagem sejam mantidas.
• object-fit | MDN — descrição detalhada da propriedade object-fit.
• Um Guia Completo para Flexbox | CSS-Tricks — criando layouts flexíveis usando Flexbox.
• Como Criar Imagens Responsivas - W3Schools — como criar imagens responsivas.
• Imagens Responsivas - MDN — sobre como criar imagens responsivas usando srcset e sizes.

Video

Navigation