22.04.2025

Estiramento de Imagem em um Div Mantendo Proporções com CSS

Resposta Rápida

Se você precisar que uma imagem seja redimensionada e preencha completamente um elemento div, mantendo suas proporções, pode utilizar a propriedade CSS background-size: cover;. A sintaxe é a seguinte:

<div style="background: url('imagem.jpg') center / cover no-repeat;"></div>

Esse método permite que a imagem se adapte adequadamente ao tamanho do div, sem distorções.

Métodos Detalhados, Incluindo Alternativas

Se você precisa usar a tag <img> para inserir uma imagem em vez de um plano de fundo, combine object-fit: cover; com a configuração da largura e altura para 100%. Como resultado, a imagem preencherá o contêiner, mantendo suas proporções:

<!-- Imagens em tela cheia são impressionantes! -->
<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="imagem.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>

Prevenindo Excesso de Conteúdo

Ao utilizar object-fit, algumas partes da imagem podem ultrapassar o contêiner. Para evitar barras de rolagem e manter um layout adequado, defina a propriedade do div como overflow: hidden;.

Imagens Responsivas e Unidades de Viewport

Quer conseguir um design responsivo? Utilize unidades de viewport (vw/vh) para definir o tamanho do contêiner. Combinado com object-fit: cover;, isso permitirá que sua imagem seja redimensionada corretamente em diferentes dispositivos:

/* Um div responsivo se adaptará a qualquer tamanho de tela */
.div-responsiva {
  width: 100vw;
  height: 50vh;
  overflow: hidden;
}
/* A imagem se ajustará ao div responsivo */
.div-responsiva img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Simplificando com a Propriedade Shorthand de Background

O CSS oferece uma propriedade abreviada background que permite combinar várias propriedades de fundo. Isso é conveniente quando você precisa controlar o tamanho de um gif transparente ou de uma imagem:

/* O gif transparente permanecerá discreto, e a imagem preencherá o fundo */
.div-com-background {
  background: url('transparente.gif') url('imagem.jpg') center / cover no-repeat;
}

Limitando o Tamanho da Imagem com Propriedades Max/Min

Para garantir que uma imagem não ultrapasse os limites, mas também não fique muito pequena, utilize as propriedades max-width, max-height, min-width e min-height. Esses limites ajudarão a controlar o tamanho da imagem, especialmente útil em layouts dinâmicos:

.imagem-tamanho-controlado {
  max-width: 100%; /* "Você não passará!" - como diria seu CSS */
  max-height: 100%; /* Sim, isso ainda é relevante */
  min-width: 50%; /* Preenchendo pelo menos metade */
  min-height: 50%; /* E pelo menos metade em altura também */
  object-fit: cover;
}

Visualização

Imagine uma moldura de foto (🖼️) que deve encaixar perfeitamente em uma peça de quebra-cabeça (🧩):

🖼️: [ Moldura Vazia ]
🧩: [ Peça da Imagem ]

Tarefa: Garantir que 🧩 encaixe perfeitamente em 🖼️ sem distorções.

.moldura {
  display: flex; /* a moldura como um lar para o quebra-cabeça */
  justify-content: center; /* centraliza horizontalmente */
  align-items: center; /* e verticalmente */
  overflow: hidden; /* oculta o excesso */
}

.peca {
  max-width: 100%; /* largura controlada */
  max-height: 100%; /* e altura também */
  object-fit: contain; /* todas as proporções preservadas */
}

E no final, a peça do quebra-cabeça (🧩) se encaixa perfeitamente na moldura (🖼️), sem distorções.

Importância do Suporte a Navegadores

object-fit não é suportado por todos os navegadores, especialmente versões mais antigas. Nesses casos, vale a pena buscar soluções alternativas, como utilizar a propriedade background-size para imagens de fundo.

Alternativas Eficazes para Object-Fit

Se object-fit funcionar de forma inconsistente, você pode colocar um gif transparente como um marcador dentro da tag <img>, enquanto a imagem real é definida como o fundo usando background-size: cover;:

<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="transparente.gif" style="background: url('imagem.jpg') center / cover no-repeat; width: 100%; height: 100%;">
</div>

Essa abordagem combina os benefícios da tag <img> e o controle do dimensionamento da imagem de fundo, permitindo que você alcance o efeito desejado.

Recursos Úteis

1. Imagem de Fundo Perfeita para a Tela Inteira | CSS-Tricks — Técnicas e códigos CSS para alinhamento preciso de div e imagem.
2. Imagens Responsivas - Aprendizado em Desenvolvimento Web | MDN — Guia sobre como criar imagens responsivas no Mozilla.
3. Como Criar Imagens Responsivas — Um guia prático do W3Schools.
4. Imagens Responsivas na Prática: Um Guia para <picture> e srcset — Exposição detalhada sobre técnicas de desenvolvimento web modernas da Smashing Magazine.
5. Criando Proporções Intrínsecas para Vídeo – A List Apart — Várias abordagens para manter proporções em mídias incorporadas.
6. Imagem de Fundo em CSS – Com Exemplos de Código HTML — Um guia abrangente da FreeCodeCamp sobre trabalhar com imagens de fundo em CSS.

Video

Navigation