Redimensionando uma imagem para uma porcentagem dela mesma exclusivamente com CSS

No domínio do web design, a necessidade de redimensionar imagens para dimensões específicas surge com frequência. Um cenário envolve reduzir o tamanho de uma imagem para uma porcentagem do seu tamanho original, sem alterar o tamanho do seu elemento contêiner. Embora JavaScript ou scripts do lado do servidor ofereçam soluções, este artigo explora possíveis alternativas somente de CSS.

É possível redimensionar uma imagem usando porcentagens de CSS?

No momento , não existe uma propriedade CSS direta que permita redimensionar uma imagem com base em seu próprio tamanho. No entanto, existem dois métodos engenhosos que podem conseguir esse efeito:

Método 1: Redimensionamento visual com transformação

Este método reduz visualmente o tamanho de uma imagem sem afetar seu dimensões reais. A técnica usa a propriedade ‘transform: scale()’ para reduzir a imagem em uma porcentagem especificada. A imagem permanece centralizada em suas dimensões originais.

Exemplo:

img {
  transform: scale(0.5);
}