Масштабирование изображений до размеров ограничивающих рамок с использованием только CSS:

Представленная задача состоит в том, чтобы масштабировать изображение так, чтобы оно поместилось в ограничивающую рамку, при этом сохраняя соотношение сторон. Предоставленный код CSS поддерживает уменьшение масштаба, но не увеличение.

CSS3 Решение:

К счастью, CSS3 предлагает решение:

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

HTML-структура:

При таком подходе image устанавливается в качестве фонового изображения элемента ограничивающей рамки. Свойство background-size: contains гарантирует, что изображение масштабируется так, чтобы заполнить ограничивающую рамку, не обрезая и не искажая его.

Совместимость:

Это решение хорошо совместимо с современными браузеры. Последнюю информацию о совместимости можно найти на странице http://caniuse.com/background-img-opts.

Центрирование:

Чтобы центрировать изображение в ограничительной рамке. , можно использовать следующий вариант:

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