Aprimorando imagens para caber em caixas delimitadoras usando somente CSS:

O desafio apresentado é aprimorar uma imagem para caber em uma caixa delimitadora enquanto preservando sua proporção de aspecto. O código CSS fornecido lida com downscaling, mas não upscaling.

Solução CSS3:

Felizmente, CSS3 oferece uma solução:

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Estrutura HTML:

Com essa abordagem, o image é definida como uma imagem de fundo do elemento da caixa delimitadora. A propriedade background-size: contains garante que a imagem seja dimensionada para preencher a caixa delimitadora sem cortá-la ou distorcê-la.

Compatibilidade:

Esta solução tem boa compatibilidade com os modernos navegadores. Para obter as informações de compatibilidade mais recentes, consulte http://caniuse.com/background-img-opts.

Centralização:

Para centralizar a imagem dentro da caixa delimitadora , a seguinte variação pode ser usada:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}