Есть изображение, которое нужно поместить в область, которая будет занимать по ширине 100% ширины родителя и по высоте - 30% ШИРИНЫ родителя. При этом центрироваться и не деформироваться. При увеличении - уменьшении родителя - масштабироваться, но не искажаться. Вот как-то так:
-
Начал делать тут: jsfiddle.net/dennila2/Lq7whsr6 но застрял.– DenniLa214 июн 2015 в 5:44
-
Моя версия с шириной в 100% от родителя, с высотой в 30% от ширины.– Regent14 июн 2015 в 7:28
-
@Regent, Ваше решение меня полностью удовлетворило! Если оформите как ответ - я смогу отметить.– DenniLa214 июн 2015 в 12:32
Добавить комментарий
|
2 ответа
А что если изображение сделать не img
, а background-image
у div
?
Тогда будут работать background-position.
Вот примерное решение...
UPD (по просьбам трудящихся)
Вот реализация с растяжкой картинки в div.
-
-
-
Я добавил
background-size: cover;
, это растягивает картинку по диву. Дальше - использование предложенных свойств - дело техники.– GrayHoax14 июн 2015 в 7:14 -
Да, в конечном счете
background-size: cover;
оказался ничуть не менее важным, чемbackground-image
иbackground-position
.– Regent14 июн 2015 в 7:29 -
- Картинка указана как фон блока (
<div class="img-wrapper">
) с помощьюbackground-image: url(URL)
- Высота в 30% от ширины блока задаётся с помощью
padding-bottom: 30%
- Для растягивания картинки по блоку используется
background-size: cover
- Для указания какую часть картинки отображать используется
background-position: 0 35%
HTML:
<div class="main">
<div class="img-wrapper"></div>
</div>
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');
}