Есть изображение, которое нужно поместить в область, которая будет занимать по ширине 100% ширины родителя и по высоте - 30% ШИРИНЫ родителя. При этом центрироваться и не деформироваться. При увеличении - уменьшении родителя - масштабироваться, но не искажаться. Вот как-то так:
Ответ
Картинка указана как фон блока (
) с помощью background-image: url(URL)
Высота в 30% от ширины блока задаётся с помощью padding-bottom: 30%
Для растягивания картинки по блоку используется background-size: cover
Для указания какую часть картинки отображать используется background-position: 0 35%
HTML:
CSS:
.main { width: 100%; height: 100%; } .img-wrapper { width: 100%; padding-bottom: 30%; background-size: cover; background-position: 0 35%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTok9GAMciVqTTlxgSojXP8yPNAt1a0iyKexU7YCDEYFr1UgrGo'); }
Пример в fiddle
HTML:
CSS:
.main { width: 100%; height: 100%; } .img-wrapper { width: 100%; padding-bottom: 30%; background-size: cover; background-position: 0 35%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTok9GAMciVqTTlxgSojXP8yPNAt1a0iyKexU7YCDEYFr1UgrGo'); }
Пример в fiddle
Комментариев нет:
Отправить комментарий