3

Есть изображение, которое нужно поместить в область, которая будет занимать по ширине 100% ширины родителя и по высоте - 30% ШИРИНЫ родителя. При этом центрироваться и не деформироваться. При увеличении - уменьшении родителя - масштабироваться, но не искажаться. Вот как-то так: как-то так

3
  • Начал делать тут: jsfiddle.net/dennila2/Lq7whsr6 но застрял.
    – DenniLa2
    14 июн 2015 в 5:44
  • Моя версия с шириной в 100% от родителя, с высотой в 30% от ширины.
    – Regent
    14 июн 2015 в 7:28
  • @Regent, Ваше решение меня полностью удовлетворило! Если оформите как ответ - я смогу отметить.
    – DenniLa2
    14 июн 2015 в 12:32

2 ответа 2

3

А что если изображение сделать не img, а background-image у div?

Тогда будут работать background-position.

Вот примерное решение...

UPD (по просьбам трудящихся)

Вот реализация с растяжкой картинки в div.

5
  • Добавил примерное решение)
    – GrayHoax
    14 июн 2015 в 6:50
  • Апдейт сделал...
    – GrayHoax
    14 июн 2015 в 7:07
  • Я добавил background-size: cover;, это растягивает картинку по диву. Дальше - использование предложенных свойств - дело техники.
    – GrayHoax
    14 июн 2015 в 7:14
  • Да, в конечном счете background-size: cover; оказался ничуть не менее важным, чем background-image и background-position.
    – Regent
    14 июн 2015 в 7:29
  • Премного благодарен всем ответившим! Вы мне очень помогли!
    – DenniLa2
    14 июн 2015 в 12:33
2
  • Картинка указана как фон блока (<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');
}

Пример в fiddle.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.