Forçar o redimensionamento da imagem enquanto mantém a proporção da imagem

Ao trabalhar com imagens, muitas vezes é necessário redimensioná-las para dimensões específicas. No entanto, preservar a proporção garante que as imagens não pareçam distorcidas ou esticadas.

Tentativa inicial:

Inicialmente, dimensões especificadas e regras CSS personalizadas foram usadas para redimensionar a imagem, mas a proporção não foi mantida:

img {
  max-width: 500px;
}

Solução:

Para forçar o redimensionamento da imagem preservando a proporção, as seguintes propriedades CSS podem ser usadas:

• display: block;: Garante que a imagem possa fluir dentro do conteúdo da página.
• max-width:230px;: Define a largura máxima do image.
• max-height:95px;: Define a altura máxima da imagem.
• width: auto;: Permite que a imagem preencha automaticamente o espaço disponível dentro de max-width e max -restrições de altura.
• height: auto;: ajusta automaticamente a altura com base no aspecto inerente da imagem ratio.

Resultado:

Aplicando estas regras CSS à imagem:

This image is originally 400x400 pixels, but should get resized by the CSS:

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

Resulta em uma imagem que é redimensionada dentro das dimensões máximas especificadas, mantendo sua proporção original.