17.04.2025

Escalonamento Proporcional de Imagens em um div com CSS

Resposta Rápida

Para garantir que uma imagem se encaixe completamente dentro de um elemento div enquanto mantém suas proporções, você deve usar a propriedade CSS object-fit: contain;. Esta propriedade assegura o escalonamento correto da imagem sem distorções.

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

Adicione a classe criada .img-fit à sua imagem dentro do elemento <div>:

<div style="width: 48px; height: 48px;">
  <img src="image.jpg" alt="" class="img-fit">
</div>

Esta abordagem permite que a imagem se adapte ao tamanho do contêiner pai enquanto preserva suas proporções originais.

Trabalhando com Tamanhos Específicos do div

Definindo Tamanhos Fixos

Certifique-se de que o elemento div tenha dimensões fixas. Por exemplo, se você quiser criar um contêiner de 48x48 pixels:

.container {
  width: 48px;
  height: 48px;
}

Adicione a classe .container ao seu elemento <div>:

<div class="container">
  <img src="image.jpg" alt="" class="img-fit">
</div>

Usando JavaScript para Suporte a Navegadores Antigos

Se a propriedade object-fit não for suportada em navegadores desatualizados, como o Internet Explorer, você pode usar JavaScript como uma alternativa:

function ajustarImagem(imagem) {
  var proporcaoContainer = 1; // Proporção do contêiner 48px / 48px
  var proporcaoImagem = imagem.width / imagem.height;

  if (proporcaoImagem <= proporcaoContainer) {
    imagem.style.width = '100%';
    imagem.style.height = 'auto';
  } else {
    imagem.style.width = 'auto';
    imagem.style.height = '100%';
  }
}

var elementoImg = document.querySelector('.img-fit');
elementoImg.onload = function() {
  ajustarImagem(elementoImg);
};

Melhorando o Desempenho com Bibliotecas JavaScript

Para otimizar o desempenho do script, você pode usar bibliotecas JavaScript como Lodash ou Underscore. Elas podem ajudar a otimizar chamadas para a função ajustarImagem usando técnicas de throttling ou debouncing.

Uso Avançado em CSS Responsivo

Proporção para Design Responsivo

A moderna propriedade CSS aspect-ratio oferece capacidades mais amplas para controlar os tamanhos dos elementos:

.container-responsivo {
  aspect-ratio: 1 / 1; // Criando um quadrado perfeito
}

Adicione a classe .container-responsivo ao seu contêiner <div>. Assim, o contêiner manterá sua proporção ao ser redimensionado.

Oferecendo uma Imagem Alternativa para Formatos Não Suportados

É uma boa prática fornecer uma imagem alternativa caso um formato específico não seja suportado pelo navegador:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="" class="img-fit"><!-- Sempre uma opção apropriada -->
</picture>

Visualização

Imagine uma moldura (🖼️) e uma fotografia (📸) que precisa se encaixar perfeitamente nela:

🖼️: [_____]
📸: [🌄] se torna [🏞️]

A imagem é escalonada para que se encaixe perfeitamente na moldura, enquanto mantém suas proporções:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

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

Assim, a imagem 🌄 se encaixa perfeitamente dentro da moldura 🖼️, preservando sua proporção.

Usando Overflow para Controlar o Excesso

A propriedade CSS overflow, quando usada com Flexbox para o contêiner <div>, ajuda a centralizar a imagem e lidar com excessos. Isso é particularmente relevante quando o tamanho da imagem excede as dimensões do elemento:

.moldura {
  width: 48px;
  height: 48px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

Aplicando srcset para Dispositivos com Diferentes Resoluções

O atributo srcset permite fornecer várias versões de uma imagem para diferentes resoluções de tela. Isso ajuda o navegador a selecionar a versão mais adequada:

<img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w," sizes="(max-width: 320px) 280px, 440px" alt="" class="img-fit">

Recursos Úteis

1. Como Manter Proporções de Blocos em CSS — Guia detalhado sobre como manter proporções no design web.
2. Imagens Responsivas: Um Guia do MDN — Documentação oficial do MDN para criar imagens otimizadas para qualquer dispositivo.
3. Como Manter a Proporção de um div Usando CSS — Discussão útil sobre métodos para manter proporções em um fórum popular de desenvolvedores.
4. A Propriedade object-fit em CSS — Guia sobre como usar a propriedade object-fit para ajustar tamanhos de imagens.
5. Imagens Responsivas: Visão Geral dos Métodos — Discussão sobre vários métodos para criar imagens responsivas que mantêm proporções durante o escalonamento.
6. Trabalhando com a Nova Propriedade Aspect-Ratio em CSS — Informações sobre a nova propriedade aspect-ratio e suporte em navegadores modernos.
7. Imagens Responsivas: Uso Adequado do Elemento <picture> e do Atributo srcset — Guia abrangente sobre como usar o elemento <picture> e o atributo srcset para criar imagens responsivas.

Video

Navigation