Mejorar la escala de imágenes para que se ajusten a los cuadros delimitadores utilizando solo CSS:

El desafío presentado es mejorar la escala de una imagen para que quepa dentro de un cuadro delimitador mientras preservando su relación de aspecto. El código CSS proporcionado maneja la reducción de escala, pero no la ampliación.

Solución CSS3:

Afortunadamente, CSS3 ofrece una solución:

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

Estructura HTML:

Con este enfoque, el La imagen se establece como imagen de fondo del elemento del cuadro delimitador. La propiedad background-size: contiene garantiza que la imagen se escala para llenar el cuadro delimitador sin recortarla ni distorsionarla.

Compatibilidad:

Esta solución tiene buena compatibilidad con la tecnología moderna. navegadores. Para obtener la información de compatibilidad más reciente, consulte http://caniuse.com/background-img-opts.

Centrado:

Para centrar la imagen dentro del cuadro delimitador , se puede utilizar la siguiente variación:

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