Сохранение пропорорций картинки при ресайзе окна в резиновой разметке?

Question

[Назар Линовецкий]

Всем привет.

Есть страница: scriptroomdev.com
ПРОБЛЕМА: Картинки внутри блоков теряют пропорции при резайсе окна, так как у них стоит height: 100%, width: 100%;
ВОПРОС: Как сохранять пропорцию для картинок в данном случае? Что бы они адаптировались (ужимались) с сохранением пропорций (как здесь: www.carolinaherrera.com/ch/en ) - тут вы можете увидеть как это работает...

Answer 1

[Сергей Кузюков]

Ставить картинку фоном блока с использованием свойств cover

Comments

[Назар Линовецкий]

Не подходит. Нужно именно для что-то придумать...
Думаю, как-то с помощью JS or jQuery решить этот вопрос.

[Назар Линовецкий]

для < img > *

Answer 2

[Роман Королев]

width: 100%;
height: auto;

max-height отключить.
Должно сработать

Answer 3

[Коля]

Если у вас блоки в которых лежат картинки, имеют процентные размеры и вы хотите чтоб картинка занимала все место этого контейнера, то вот:

img { 
       max-width: 100%;
}

Answer 4

[Вадим Белкин]

www.carolinaherrera.com/ch/en/ в вашем примере, если посмотреть код, увидите, что картинки растянуты по высоте на 100% и абсолютно позиционированы в блоке, так же выровнены по центру с автоматической шириной. Тем самым при сжатие размеров окна ресайзятся только контейнеры, фото там остаются одного размера и просто обрезаются по краям.

Comments

[Вячеслав]

Если посмотреть еще внимательней, можно заметить, что при любом ресайзе размер картинок (и их контейнеров) меняется через js.

[Вадим Белкин]

Высота как раз скриптом под размер контейнера подгоняется. Иначе стилями просто height: 100%

[Вадим Белкин]

jsfiddle.net/4qxer3w8 перенес на скорую руку ваш код, тут только нужно задать минимальную высоту всему контейнеру, чтобы при ресайзе окна не уродовалось и картинки вставлять по ширине процентов на 15-30 больше ширины контейнера. Аналогичным способом сделано в приведенном вами примере.

Answer 5

[Назар Линовецкий]

Ребята. Порешал всё таки через background-image и cover...
Спасибо всем!!!

Comments

[y0u]

В таком случае закройте вопрос. Поставьте плюсик Сергей Кузюков, имейте совесть :)