03.02.2025

Redimensionamento de Imagens em CSS: Percentual do Tamanho Original

Resposta Rápida

Para redimensionar uma imagem rapidamente como uma porcentagem de seu tamanho original, a função transform: scale() em CSS é bastante útil. Para reduzir o tamanho de uma imagem, use um valor menor que 1 e, para aumentar, use um valor maior que 1.

Vamos fazer uma imagem ter metade do seu tamanho:

img {
  transform: scale(0.5);  // Uma ferramenta real para escalonamento de imagens!
}

Quer dobrar o tamanho da imagem?

img {
  transform: scale(2);  // Às vezes, o tamanho realmente importa!
}

Experimente diferentes valores de escalonamento como 0.5, 2 e assim por diante até alcançar o tamanho desejado.

Telas Diferentes, Cenários Diferentes - Uma Abordagem Responsiva

transform: scale() é conveniente, mas suas capacidades não são ilimitadas – ele não afeta o tamanho real do elemento no layout. Aqui, usar porcentagens para width, max-width e unidades vw pode fornecer flexibilidade e adaptabilidade para as imagens:

img {
  max-width: 100%;  // Fica dentro das dimensões definidas
  width: 50vw;      // Ocupa metade da largura da janela
  height: auto;     // Mantém as proporções
}

Essa abordagem ajuda a imagem a se adaptar ao tamanho do contêiner enquanto preserva as proporções corretas.

Envoltório em um Contêiner - Abordagem Absoluta

Definir a posição absoluta de uma imagem dentro de um contêiner permite que você controle seu tamanho com base nas bordas do contêiner, ao invés de apenas o tamanho do bloco pai. overflow: hidden ajudará a garantir uma exibição adequada:

<div class="wrapper">  <!-- Sua imagem recebe um espaço dedicado -->
  <img src="image.jpg" alt=""/>
</div>

.wrapper {
  position: relative;
  width: 50%;        /* Define uma restrição de largura */
  overflow: hidden;  /* Evita o transbordo de conteúdo */
}

.wrapper img {
  width: 100%;    /* A imagem preenche neatamente o contêiner */
  height: auto;
  display: block; /* Remove margens desnecessárias */
}

Assim, a .wrapper é reduzida para 50% da largura do pai, e a imagem ocupa todo o espaço disponível.

Exibição Ideal para Todos - Responsividade com srcset

Usando o atributo srcset na tag <img>, você pode definir várias fontes de imagem dependendo da tela:

<img src="image.jpg" alt=""
     srcset="image-320w.jpg 320w,
             image-640w.jpg 640w,
             image-1280w.jpg 1280w"
     sizes="(max-width: 640px) 50vw, 25vw">  // Otimize a imagem para uma melhor exibição

O navegador escolherá automaticamente o tamanho ideal da imagem com base nas dimensões atuais da janela e nas capacidades do dispositivo.

Fique Atento!

As propriedades de float float, posicionamento position, ou restrições de largura min-width/max-width podem afetar a colocação das imagens no layout. Sempre testei o resultado em várias condições.

Um Exemplo Claro de Redimensionamento

Escalonar uma imagem pode ser comparado ao redimensionamento de um balão:

Antes: 🎈(100%)

Vamos reduzir para 50%, como se estivéssemos apenas soltando um pouco de ar:

/* Reduzir o tamanho da imagem pela metade */
.image-selector {
  width: 50%;  // Elegante e simples
  height: auto;
}

Após o redimensionamento:

Após Redimensionar: 🎈👌(50%)

Como você pode ver, isso é bem simples de implementar enquanto mantém a forma do balão!

Indo Além do Comum - Escalonamento Avançado

Para um controle mais detalhado sobre os tamanhos das imagens, você pode usar propriedades CSS3 que definem as dimensões internas e externas dos elementos dentro de componentes responsivos. Por exemplo, usando figure como um contêiner flexível:

figure {
  width: min-content; // Comprime para se ajustar perfeitamente à imagem
}

img {
  width: 100%; // Se estica para o tamanho do contêiner
  height: auto;
}

Usando min-content, o elemento figure envolve seu conteúdo perfeitamente, permitindo um controle preciso sobre a aparência dos elementos.

Recursos Úteis

1. background-size - CSS: Folhas de Estilo em Cascata | MDN — Uma discussão detalhada sobre a propriedade background-size para escalonamento de imagens de fundo.
2. Propriedade de transformação CSS — Aprenda tudo sobre transformações em CSS.
3. Altura, Largura e Max-width em CSS — Uma visão geral detalhada das dimensões em CSS.
4. Módulo de Fundos e Bordas CSS Nível 3 — Especificação oficial do CSS para propriedades de fundos e bordas.
5. Imagens Fluídas – A List Apart — Uma exploração aprofundada de imagens responsivas.
6. max-width - CSS: Folhas de Estilo em Cascata | MDN — Como tornar imagens responsivas usando max-width.
7. calc() - CSS: Folhas de Estilo em Cascata | MDN — Usando a função calc() para trabalhar com valores percentuais e em pixels.

Conclusão

Lembre-se: a maestria vem com a prática. Se você achou este material útil, por favor, deixe seu feedback. Desejando a você codificação de sucesso e depuração impecável!👩‍💻🐞🐛

Video

Navigation