Есть блок, растянутый на всю ширину экрана, имеющий в качестве фона художественное изображение. При масштабировании экрана изображение не должно обрезаться и (непропорционально) сжиматься, то есть, насколько могу судить, высота блока должна подстраиваться под его ширину пропорционально размерам фонового изображения.
Вижу два варианта реализации:
Вложить фоновое изображение в блок посредством тега так, чтобы изображение само растягивало блок по высоте.
Пропорционально менять высоту блока средствами JavaScript
Способа достичь желаемого при помощи css я не знаю. Хотелось бы узнать у профессионалов, как это принято (и правильно) делать, возможно, найдутся и другие способы, более приемлемые.
Ответ
Самый известный трюк - задавать пропорции с помощью 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;
}
Комментариев нет:
Отправить комментарий