22.04.2025

Esticando uma Imagem em um <div> Enquanto Mantém Proporções

Resposta Rápida

Para esticar perfeitamente uma imagem para caber nas dimensões de um div, mantendo suas proporções, você deve usar a propriedade CSS object-fit: cover;. Defina a largura e altura do elemento div para que a imagem o preencha completamente, utilizando width: 100%; height: 100%;. Veja como é a estrutura:

.img-full {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantém as proporções ao esticar a imagem para preencher o div */
}

<div style="width: 200px; height: 200px;">
  <img src="sua-imagem.jpg" class="img-full" alt="">
</div>

Certifique-se de que as dimensões para o div estão especificadas.

Mais Sobre object-fit

A propriedade object-fit fornece diversas maneiras de modificar como as imagens são exibidas:

• fill: Preenche o div sem considerar as proporções da imagem.
• contain: A imagem é redimensionada para caber dentro do div, mantendo suas proporções.
• cover: A imagem preenche o div, e as proporções não são distorcidas.
• none: A imagem mantém seu tamanho original e não se ajusta ao div.
• scale-down: Aplica a menor escala com base nas opções none ou contain.

Quando object-fit Não é Adequado

Se seu navegador não suporta object-fit, você pode usar a imagem como um fundo para o div com CSS:

.div-background {
  background-image: url('caminho/para/imagem.jpg');
  background-size: cover; /* Mantém as proporções da imagem */
  background-position: center; /* Centraliza a imagem */
}

Certifique-se de especificar a URL correta na propriedade background-image e defina as dimensões para o div.

Tamanho Importa

Para divs responsivos, use unidades de medida responsivas, como porcentagens:

.responsive-div {
  width: 100%; /* A largura acompanha o tamanho do elemento pai */
  height: 50vw; /* A altura é metade da largura da janela de visualização */
}

O div será redimensionado junto com a janela ou o elemento pai, enquanto a imagem permanecerá inalterada.

jQuery em Ação

Para escalar dinâmicamente uma imagem contida em divs de tamanhos ou proporções diferentes, você pode usar jQuery:

$(window).load(function() {
  // Aguarda as imagens serem carregadas.
  $('.image-selector').each(function() {
    var imageAspect = $(this).width() / $(this).height();
    if (imageAspect > 1) {
      // Define o marcador de orientação horizontal.
      $(this).addClass('wide');
    } else {
      // Define o marcador de orientação vertical.
      $(this).addClass('tall');
    }
  });
});

Depois, adicione os estilos CSS para as classes .wide e .tall.

Visualização

Uma representação visual do mecanismo de estiramento de imagens enquanto mantém proporções pode ser feita da seguinte forma:

Imagine uma situação onde uma imagem 🖼️ e um `div` ⬜ estão jogando Tetris:

Antes do processo de estiramento começar:
A imagem 🖼️ está pronta para se encaixar no `div` ⬜.
**As proporções da imagem original são mantidas**. 🔄

Depois do estiramento:
A imagem 🖼️ se encaixa perfeitamente na forma do `div` ⬜.
**A imagem preenche todo o espaço** 🌌, com proporções preservadas. 💠

O processo é semelhante a encontrar uma moldura do tamanho certo para uma pintura, onde a própria pintura não muda suas formas e tamanhos.

Mantendo Dentro dos Limites

Se você precisar que a imagem permaneça estritamente dentro do div e não se estenda para fora de seus limites, use max-width: 100% e max-height: 100%:

.img-max {
  max-width: 100%; /* Impede que a imagem exceda os limites */
  max-height: 100%; /* Mantém o tamanho da imagem dentro do `div` */
}

Isso permite que a imagem se adapte ao tamanho do div sem ultrapassá-lo.

Horizontes do object-fit

Se object-fit não atender à necessidade, você pode usar transformações CSS:

.img-transform {
  width: auto;
  height: auto;
  max-width: 100%; /* Limita a largura */
  max-height: 100%; /* Limita a altura */
  transform: scale(1.1); /* Aumenta ligeiramente o tamanho */
}

O valor do parâmetro scale pode ser ajustado para uma melhor exibição, mas deve-se ter cautela ao aplicá-lo.

Recursos Úteis

1. Caixas de Proporção | CSS-Tricks
2. object-fit - CSS | MDN
3. Propriedade CSS object-fit - W3Schools
4. Criando Proporções Intrínsecas para Vídeo - A List Apart
5. Imagens Responsivas: Um Guia Para Usar o Elemento Picture e srcset — Smashing Magazine
6. Dúvidas sobre 'aspect-ratio' - Stack Overflow
7. Tutorial | DigitalOcean

Conclusão

Programar é uma arte, e agora você acaba de adicionar mais uma criação ao seu portfólio de projetos. Se você achou essa informação útil e criou sua obra-prima, compartilhe conosco ou dê um "like". Desejamos sucesso em suas empreitadas de desenvolvimento! 👩‍💻

Video

Navigation