Как отцентрировать и масштабировать изображение?

#html #css #вёрстка

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

    

Ответы

Ответ 1

Картинка указана как фон блока (
) с помощью 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.


Ответ 2

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

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

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

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

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