Как сделать адаптивным блок с картинками, чтобы высота и ширина менялись пропорционально?

Question

[Мариана Марианова]

Нужно сделать карту marina.cruiser.pw/play адаптивной, чтобы на мобильных устройствах она всегда была на всю ширину и высота подстраивалась пропорционально ширине. Пробую .img-box прописать min-width и min-height, меняется только ширина в зависимости от экрана, а высота блока получается всегда одинаковая, min-height: auto не помогает. Внутри .img-box лежат 5 картинок одного размера, картинки наложены друг на друга слоями.

Answer 1

[Андрей]

А чем классический вариант с max-width: 100%; height: auto; не подходит?
Если же нужно более гибкое решение с заданным соотношением сторон то можно погуглить padding hack.
andyshora.com/css-image-container-padding-hack.html например

Comments

[Мариана Марианова]

Спасибо огромное. padding-bottom то, что нужно!

Answer 2

[Максим Софронов]

Для сохранения пропорций блока используйте padding-bottom: https://jsfiddle.net/s0hfu7c5/1/

Comments

[Мариана Марианова]

Спасибо огромное. padding-bottom то, что нужно!

Answer 3

[Павел]

Так правильно, Вы же задаете минимальную высоту и ширину.
Вам нужно: width: 100%; height:auto; и если что ограничить max-with и max-height