Как сделать пропорциональное уменьшение блока при position: absolute?

Question

[Overlord934]

Проблема следующая. Нужно поставить картинку на абсолютное позиционирование в блоке, но когда сужается экран происходит следующее:
1. Если указать блоку max-width: ... и max-height: ... , то из-за того, что картинка стоит на абсолютном позиционировании блок принимает значение ширины и высоты 0. Т.е этот вариант отпадает т.к блока физически не видно.
2. Если указать просто width и height, то тогда не будет пропорционального уменьшения.
Как можно реализовать пропорциональное уменьшение иначе?
Вот мой код

Comments

[IvanU7n]

по ширине обычно нормально работает padding trick, а вот по обеим осям, насколько я знаю, только aspect-ratio; правда поддержка у него недавняя, может не подойти по требованиям

код не смотрел ибо непонятно куда именно

[Ankhena]

1. Песочница нерабочая, картинок не видно, размеры не проставлены.
2. За пропорции отвечает в основном aspect-ratio. (а также хак с паддингами, единицы измерения от вьюпорта или контейнера и т.д.)
3. Нет образца - не понятно, зачем вообще абсолют.

[pddev]

Ничего не показывает в поле codepen - пусто

Answer 1

[leeroyjenkins176]

Для пропорционального уменьшения - aspect-ratio. Если браузерная поддержка не позволяет, то посмотрите, как реализован класс .ratio в бутстрапе.
А для уменьшения блока относительно ширины используйте width и max-width вместе
.el {width: 500px; max-width: 100%}