Pare de esticar suas imagens! Redimensione com proporção perfeita no CSS

Redimensionar uma imagem em CSS é extremamente simples com o CSS moderno. Veja como nunca mais distorcer suas imagens.

Front-end

Redimensionar o tamanho e proporção de uma imagem em CSS é algo muito legal de se fazer.

Mas no começo dos meus estudos em front-end sempre encontrei explicações complexas sobre isso. Talvez porque mudar a proporção de uma imagem no Photoshop seja muito mais simples do que fazer isso na web.

Quando você terminar de ler esse artigo, será capaz de definir o tamanho de qualquer imagem. E mudar o ponto focal dela também.

Avisos importantes sobre redimensionar imagem em CSS

Inicialmente, não pense em web, HTML, CSS, div, etc... pense apenas em uma imagem, como um arquivo.

Ao redimensionar uma imagem, você precisa escolher entre distorcer ou cortar parte dela.

Veja no exemplo abaixo com uma imagem quadrada. Acredito que distorcer quase nunca é o objetivo:

Cortar quase sempre é o melhor caminho:

foto de um cachorro com as laterais cortadas

Outro ponto é que esse tutorial funciona com qualquer tamanho de imagem.

Qualquer tamanho de imagem.

Porém, o ideal é que a imagem original tenha a proporção mais próxima possível da proporção final. Caso contrário, a imagem terá um corte grande. Veja as laterais da imagem abaixo:

foto com ambas laterais cortadas de um cachorro

Claro que você pode redimensionar uma imagem muito alta ou muito larga, porém isso pode afetar a performance. Se você redimensionar uma imagem de 1000x200 para 200x200, um pedaço de 800x200 foi baixado em vão.

foto de um prédio com o topo e fundo cortados

Você sempre tem a opção de cortar uma imagem antes de subir no site. Basta usar um Photoshop, Gimp ou outro programa de edição. Isso vai ajudar no tempo de carregamento e experiência da página.

Se isso não for possível, continue lendo que vou te mostrar como fazer tudo isso com CSS.

Como definir a proporção de uma imagem em CSS com aspect-ratio

Aspect-ratio é uma propriedade CSS que serve exatamente para redimensionar uma imagem.

Seu valor são dois números separados por uma barra (como uma fração ou divisão), ou um valor decimal (o resultado dessa divisão):

16/9 ou 1,78: é o famoso widescreen
3/4 ou 0.75: proporção daquelas fotos que ninguém fica bonito
21/9 ou 2.33: tela ultrawide, popular entre devs coda fofo
1/1 ou 1: imagem quadrada (ou 2/2, 3/3, ...)

Prefiro usar os números separados por uma barra. Assim fica mais claro que o primeiro número é a largura, e o segundo número é a altura da imagem. Lembre que isso é a proporção, e não os pixels.

Alguns detalhes que irão facilitar a sua vida (me agradeça no futuro). Quando o número antes da barra é maior (ou o número decimal é maior que 1), a imagem é mais larga do que alta (exemplo: widescreen).

numero antes da barra maior mostrando a imagem wide

E quando o número depois da barra é maior (ou o número decimal é menor que 1), a imagem é mais alta do que larga (exemplo: stories do Instagram).

numero depois da barra maior mostrando a imagem vertical

Mas para aplicar esse CSS, primeiro você precisa da tag de imagem no HTML:

<img
  src="https://images.unsplash.com/photo-1686890121533-ac7aecfb15cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
  alt="doguinho"
  class="image"
/>

Agora sim o CSS:

.image {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1; /* aqui a magia acontece */
  object-fit: cover;
}

As propriedades width e max-width ajustam a responsividade, e impedem que a imagem ultrapasse o espaço reservado para ela. Você pode adaptar essas duas conforme o caso.

A propriedade chave aspect-ratio recebeu o valor 1/1, que deixa a imagem quadrada. Aqui você pode viajar e testar os valores que quiser.

Por fim, object-fit:cover serve exatamente para a imagem não distorcer, e sim cortar parte dela. Se você mudar para object-fit:contain, esse corte é substituído por espaços vazios ao redor da imagem. Também não vejo como um resultado muito agradável, mas fica a seu critério.

propriedade object-fit com valor contain em css

Agora... você percebeu que todas as imagens redimensionadas em CSS fazem um recorte bem no centro dela?

É possível alterar isso.

Como mudar o ponto focal de uma imagem em CSS após redimensioná-la

Pronto, o principal você já sabe. Mas pode ir além.

Ao mudar a proporção de uma imagem você também corta suas pontas. Isso oculta uma região dela, enquanto exibe outra que vou chamar de foco.

Se você não configurar o foco, ele será sempre o centro da imagem.

Isso acontece porque o valor padrão da propriedade object-position é 50% 50%. Ou seja, centraliza tanto na horizontal, quanto na vertical, respectivamente. Use outros valores percentuais para mudar isso.

Outra forma mais fácil é usar palavras reservadas. Se a imagem for larga, use os valores left para focar na esquerda:

Ou right para focar na direita:

Já se a imagem for mais alta, você pode focar no topo (top):

Ou no fundo (bottom):

Veja mais sobre a propriedade object-position na MDN.

Assim, além de criar imagens com tamanhos personalizados em CSS, você escolhe qual região quer exibir.

E agora um bônus: com tudo que você aprendeu aqui, não ficou fácil deixar uma imagem quadrada? E assim, basta mais 1 passo para deixar uma imagem redonda em CSS.

Há alguns anos (escrevo isso em março de 2025), a propriedade aspect-ratio não era amplamente aceita pelos navegadores. Hoje esse jogo mudou, e você pode usá-la com tranquilidade. Veja a propriedade aspect-ratio no Caniuse .

aspect ratio no caniuse mostrando 94% de uso pelos navegadores

Nessa época, não era recomendado usar o aspect-ratio em larga escala. Então eu usava a técnica do container para redimensionar uma imagem. Vou explicar essa técnica rapidamente, porém não se apegue a ela, pois além de ela não ser tão necessária, é mais complexa de entender.

Como definir a proporção de uma imagem em CSS com um container

Aqui o HTML sofre uma alteração.

Coloque duas divs ao redor da imagem, elas servem para definir a proporção e posicionamento:

<div class="container">
  <div class="inner">
    <img
      src="https://images.unsplash.com/photo-1686890121533-ac7aecfb15cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
      alt="doguinho"
      class="image"
    />
  </div>
</div>

E agora o CSS

.container {
  width: 100%;
  max-width: 400px; /* opcional */
}

.inner {
  position: relative;
  height: 0;
  padding-bottom: 100%; /* aqui a magia acontece */
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

As propriedades da div container fazem o mesmo de antes: responsividade e evita o transbordo.

A div inner também possui suas responsabilidades:

height:0: zera a altura do container
padding-bottom:100%: expande a área visível da div para exibir a imagem, já que sua altura é zero

O padding-bottom com valor percentual se baseia na largura do elemento pai. Ou seja, mesmo que seja uma propriedade do eixo vertical, ela usa como referência o eixo horizontal.

Por exemplo, se o container tem 100px de largura, e inner tem padding-bottom:30%, isso resultará em 30px de padding-bottom.

Para terminar, o CSS da imagem obriga ela a preencher o espaço do elemento pai e evita a distorção.

O resultado será o mesmo que já mostrei com o aspect-ratio.

Crie uma página simples com esse código, e ative ou desative cada propriedade no DevTools para entender o que acontece.