Às vezes, é necessário ajustar uma imagem em uma determinada dimensão. Podemos redimensionar a imagem especificando a largura e a altura de uma imagem. Uma solução comum é usar o largura máxima: 100%; e altura: automático; para que imagens grandes não excedam a largura do seu contêiner. O largura máxima e altura máxima propriedades do CSS funcionam melhor, mas não são suportadas em muitos navegadores.
Outra forma de redimensionar a imagem é usando o ajuste ao objeto property , que se ajusta à imagem. Esta propriedade CSS especifica como um vídeo ou imagem é redimensionado para caber em sua caixa de conteúdo. Ele define como um elemento se encaixa no contêiner com largura e altura estabelecidas.
O ajuste ao objeto propriedade é geralmente aplicada a imagem ou vídeo. Esta propriedade define como um elemento responde à largura e altura do seu contêiner. Principalmente existem cinco valores de ajuste ao objeto propriedade como preencher, conter, cobrir, nenhum, reduzir, inicial , e herdar . O valor padrão desta propriedade é 'preencher' .
Exemplo
Neste exemplo, estamos redimensionando a imagem usando o largura máxima: 100%; e altura: automático; propriedades.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Teste agora Saída
Exemplo
Neste exemplo, estamos usando o ajuste ao objeto: capa; propriedade.
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> Teste agora Saída
No exemplo acima, usamos o cobrir valor do ajuste ao objeto propriedade. Semelhante ao exemplo acima, podemos usar os outros valores do ajuste ao objeto propriedade para redimensionar a imagem.