Mantendo a proporção com 100% de largura ou altura em CSS

Ao usar CSS, muitas vezes precisamos definir a largura ou altura das imagens para 100%. No entanto, isso pode resultar na distorção da imagem. Isso ocorre porque a proporção (a relação proporcional entre a largura e a altura da imagem) não está sendo mantida.

Para preservar a proporção ao usar 100% de largura ou altura, precisamos restringir o tamanho da imagem em um maneira específica. Se definirmos apenas uma dimensão (largura ou altura) em uma imagem, a proporção será automaticamente preservada.

No entanto, se definirmos a largura e a altura para 100%, a imagem poderá ficar muito grande para o nosso espaço pretendido. Neste caso, podemos colocar a imagem dentro de um DIV com largura ou altura máxima que atenda às nossas necessidades. Podemos então usar a propriedade overflow:hidden para cortar qualquer parte da imagem que se estenda além das dimensões especificadas.

Como alternativa, podemos usar as propriedades max-width e max-height para controlar o tamanho máximo do imagem. Ao definir esses valores sem definir quaisquer dimensões mínimas, garantimos que a imagem não será distorcida e não excederá as dimensões máximas especificadas.