Redimensionar imagem em CSS

1. Use as propriedades max-width e max-height para redimensionar a imagem em CSS
2. Use a propriedade object-fit para redimensionar a imagem em CSS
3. Use o valor auto para largura e a propriedade max-height para redimensionar a imagem em CSS

Este artigo apresenta métodos para redimensionar uma imagem em CSS para ajustá-la em uma div proporcionalmente, mantendo sua altura e largura.

Use as propriedades max-width e max-height para redimensionar a imagem em CSS

Sempre que inserimos uma imagem em HTML, a imagem ocupa o total de pixels de seu tamanho. Se a imagem estiver dentro de um contêiner específico, às vezes o tamanho da imagem pode ser maior que o tamanho do contêiner. A imagem irá cobrir mais espaço na tela; tomará áreas de outros elementos. Como resultado, a página da Web não seguirá nosso design e será pouco atraente. Para se livrar desse problema, podemos usar as propriedades CSS max-width e max-height para redimensionar automaticamente a imagem de acordo com o tamanho do contêiner. Essas propriedades definem a altura e largura máximas de um elemento. Se o conteúdo do elemento tiver mais largura e altura do que as propriedades max-width e max-height, seus tamanhos serão ajustados com o valor dessas propriedades. Mas, se seus tamanhos forem pequenos, nenhum efeito ocorre. Podemos definir as propriedades max-height e max-width para um elemento e, portanto, os elementos dentro do contêiner ajustarão seu tamanho.

Por exemplo, crie um div com a classe cat em HTML. Dentro de div insira uma imagem usando a tag <img>. Em CSS, selecione a tag img e atribua as propriedades max-width e max-height a 100%. Em seguida, selecione a classe cat e forneça height e width de 200px e 200px.

No exemplo abaixo, inserimos uma imagem aleatória de LoremFlickr, que tem 300px de width e height. Porém, o contêiner cat tem altura e largura de 200px. Como usamos as propriedades max-height e max-width, as imagens maiores diminuem para o tamanho do contêiner. Assim, redimensionamos automaticamente a imagem.

Código de exemplo:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

Use a propriedade object-fit para redimensionar a imagem em CSS

Podemos usar a propriedade object-fit em CSS para redimensionar a imagem para caber em seu contêiner. Um contêiner pode ser maior ou menor do que a imagem. A propriedade permite ajustar a imagem ou vídeos de acordo com o tamanho do container. Podemos especificar a maneira como a imagem se ajusta usando a propriedade object-fit. A propriedade assume os valores como fill, contain, cover, none e scale-down. Podemos usar o valor contain para que a imagem maior possa ser reduzida para a dimensão dada do contêiner.

Por exemplo, insira uma imagem de 600px de altura e largura usando a tag img como no primeiro exemplo. Em CSS, selecione a tag e defina a altura e a largura como 100%. Use o valor contain na opção object-fit. Em seguida, selecione a classe cat e dê a altura e largura de 300px ao contêiner.

Aqui, inserimos uma imagem de dimensão maior que o tamanho do container. A imagem é 600px enquanto o contêiner tem apenas 300px. Usando a propriedade object-fit, podemos reduzir a imagem para as dimensões do contêiner. Assim, podemos redimensionar automaticamente a imagem.

Código de exemplo:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

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

Use o valor auto para largura e a propriedade max-height para redimensionar a imagem em CSS

Podemos usar o valor auto para a largura e definir a propriedade max-height para especificar a largura de uma imagem para caber em um contêiner. Reduziremos a altura da imagem à altura do contêiner. Por exemplo, insira uma imagem como acima em HTML e defina a altura do contêiner como 200px em CSS. Em seguida, selecione a tag img, defina a largura como auto e defina a propriedade max-height como 100%.

No exemplo abaixo, a imagem tem inicialmente 400px de altura e largura. Definimos a altura do contêiner para 200px. A propriedade max-height definida para 100% reduz a imagem para 200px. Assim, redimensionamos a altura da imagem de acordo com a altura do container.

Código de exemplo:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}