Как сделать пропорциональное уменьшение блока при position: absolute?
Проблема следующая. Нужно поставить картинку на абсолютное позиционирование в блоке, но когда сужается экран происходит следующее:
1. Если указать блоку max-width: ... и max-height: ... , то из-за того, что картинка стоит на абсолютном позиционировании блок принимает значение ширины и высоты 0. Т.е этот вариант отпадает т.к блока физически не видно.
2. Если указать просто width и height, то тогда не будет пропорционального уменьшения.
Как можно реализовать пропорциональное уменьшение иначе?
Вот мой код snippet
Дополнительно:
по ширине обычно нормально работает padding trick, а вот по обеим осям, насколько я знаю, только aspect-ratio; правда поддержка у него недавняя, может не подойти по требованиям
код не смотрел ибо непонятно куда именно
2. За пропорции отвечает в основном aspect-ratio. (а также хак с паддингами, единицы измерения от вьюпорта или контейнера и т.д.)
3. Нет образца - не понятно, зачем вообще абсолют.
Ответы:
Для пропорционального уменьшения - aspect-ratio. Если браузерная поддержка не позволяет, то посмотрите, как реализован класс .ratio в бутстрапе.
А для уменьшения блока относительно ширины используйте width и max-width вместе
.el {width: 500px; max-width: 100%}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать пропорциональное уменьшение блока при использовании свойства position: absolute, вам нужно задать соответствующие значения для ширины и высоты блока, а также использовать относительные единицы измерения, такие как проценты.
Пример:
.parent { position: relative; width: 500px; height: 500px; } .child { position: absolute; width: 50%; height: 50%; }
В данном примере, блок .parent является родительским блоком, у которого заданы ширина и высота в 500 пикселей. Блок .child является дочерним блоком, который имеет свойство position: absolute и заданы ширина и высота в 50 процентов от родительского блока. Таким образом, при изменении размеров родительского блока, дочерний блок будет автоматически уменьшаться пропорционально.
Убедитесь, что у родительского блока заданы правильные размеры и позиционирование, чтобы дочерний блок мог корректно отображаться и масштабироваться. Также учтите, что использование свойства position: absolute может повлиять на расположение других элементов на странице, поэтому рекомендуется внимательно настраивать стили для достижения нужного эффекта.