Способы пропорционального масштабирования блоков

#html #css #css3 #html5

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

Вижу два варианта реализации:


Вложить фоновое изображение в блок посредством тега  так, чтобы изображение
само растягивало блок по высоте.
Пропорционально менять высоту блока средствами JavaScript.


Способа достичь желаемого при помощи css я не знаю. Хотелось бы узнать у профессионалов,
как это принято (и правильно) делать, возможно, найдутся и другие способы, более приемлемые.
    

Ответы

Ответ 1

Самый известный трюк - задавать пропорции с помощью height:0 и padding-bottom, так
называемый padding-bottom hack.

Значение для padding-bottom расчитывается по формуле:


  высота изображения * 100 / ширина изображения


или


  высота изображения / ширина изображения * 100




В данном снипете изображение имеет размеры 1280х720 пикселей, следовательно:


  720 * 100 / 1280 = 56.25




.block {
  width: 100%;
  height: 0px;
  padding-bottom: 56.25%;
  background: url(http://files.all-free-download.com//downloadfiles/wallpapers/1280_720/heihachi_mishima_tekken_7_4k_17496.jpg)
no-repeat center;
  background-size: cover;
}