Como diminuir o tamanho de uma imagem no CSS

O código mais básico para deixar uma imagem menor e responsiva:

img {
  max-width: 100%;
  height: auto;
}

Isso garante que a imagem nunca ultrapasse a largura do seu container e mantém a proporção original. Para a maioria dos casos de responsividade, esse é o código suficiente.

Mas existem outros cenários: fazer todas as imagens de uma galeria ficarem do mesmo tamanho sem distorcer, definir uma área fixa que a imagem deve preencher, ou controlar como a imagem se comporta dentro de um card. Para isso, você precisa de mais propriedades.

max-width e height: auto (imagem responsiva)

A combinação mais usada:

img {
  width: 100%;       /* ocupa toda a largura disponível */
  max-width: 600px;  /* mas não passa de 600px */
  height: auto;      /* mantém a proporção original */
}

height: auto é fundamental. Sem ele, se você definir apenas width, a imagem pode distorcer verticalmente.

Para limitar a altura em vez da largura:

img {
  max-height: 300px;
  width: auto;       /* mantém proporção horizontal */
}

object-fit: como preencher um espaço sem distorcer

Quando você precisa que imagens de tamanhos diferentes ocupem exatamente o mesmo espaço visual, object-fit resolve. É o caso de galerias, cards de produtos e listas com thumbnails.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;   /* preenche o espaço, cortando o excesso */
}

Com object-fit: cover, a imagem preenche o container inteiro mantendo a proporção. O que sobra é cortado. Sem essa propriedade, a imagem seria esticada para caber no espaço de 300×200 e ficaria distorcida.

Valores do object-fit

Para posicionar qual parte da imagem fica visível quando cover corta, use object-position:

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: center top; /* mostra o topo da imagem */
}

aspect-ratio: proporção garantida (CSS moderno)

aspect-ratio define a relação entre largura e altura. Combinado com object-fit, garante que o container da imagem sempre tenha a proporção certa, independente do tamanho da tela.

img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* proporção 16:9 */
  object-fit: cover;
}

Isso é especialmente útil para banners e thumbnails de vídeo. A imagem sempre vai ter proporção 16:9, seja em desktop (grande) ou mobile (pequena), sem precisar de media queries.

Para quadrado:

.card-imagem {
  width: 200px;
  aspect-ratio: 1;      /* 1:1 = quadrado */
  overflow: hidden;
}

.card-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Comparação das abordagens

Imagem dentro de um container flex ou grid

Quando a imagem está dentro de um elemento com display flex ou grid, pode se comportar de forma inesperada. Para evitar distorção:

.container {
  display: flex;
}

.container img {
  width: 100%;
  height: auto;
  min-width: 0;    /* importante no flex: evita que a imagem estoure o container */
  flex-shrink: 1;
}

O min-width: 0 resolve um problema comum onde imagens dentro de flex containers ignoram o max-width e estouram o layout.

Para aprofundar o trabalho com imagens em HTML, veja como adicionar uma imagem no HTML. Para técnicas de posicionamento de texto sobre imagens, veja como colocar texto em cima de uma imagem em HTML.

Perguntas frequentes

Como deixar uma imagem menor no CSS sem perder qualidade?

Use max-width com height: auto. Isso reduz a imagem visualmente no navegador sem afetar o arquivo original. Para reduzir o peso do arquivo, comprima a imagem antes do upload em ferramentas como Squoosh (squoosh.app).

Por que minha imagem fica distorcida quando defino width e height?

Porque você está forçando dimensões diferentes da proporção original sem usar object-fit. Adicione object-fit: cover para preencher o espaço sem distorção, ou use height: auto para manter a proporção automaticamente.

Como fazer imagens responsivas sem esticar?

Use max-width: 100%; height: auto; no elemento img. Isso limita a imagem à largura do container sem esticá-la verticalmente. Para imagens de fundo, use background-size: contain ou background-size: cover.

Qual a diferença entre width: 100% e max-width: 100%?

width: 100% força a imagem a ter exatamente a largura do container. max-width: 100% significa que a imagem pode ter até 100% do container, mas se for menor, mantém o tamanho original. Para imagens que não devem crescer além do tamanho original, max-width: 100% é mais seguro.

Como centralizar uma imagem depois de redimensionar?

Adicione display: block; margin: 0 auto; para centralizar horizontalmente. Para centralizar dentro de um container flex, use align-items: center; justify-content: center; no container.