Как ограничение высоты изображения на разных ширинах контейнера?
Добрый вечер!
Не пойму как правильнее ограничивать высоту изображения.
Я использую bootstrap 5 сетку, имеем 6 разных значений контейнера в зависимости от ширины экран.
Изображения загружаются через CMS, они могут быть разных размеров, но я ограничиваю по высоте и ширине, чтобы не ломалась верстка и не пришлось заказчику менять пропорции вручную.
Сейчас я прописываю для каждых таких блоков свой медиа-запрос меняющий высоту изображения под контейнер. (ширина берется относительно блока-родителя). Также, вешаю object-fit, чтобы изображение растягивалось внутри своего блока.
Вопрос в чем: есть ли какой-то способ чтобы не прописывать по 5 медиа-запросов?
не очень понятно для чего 5 медиа, нужен какой-то пример наверное с проблемой. картинку лучше в таких случаях оборачивать в div или span или в другой удобный тег
Вопрос в чем: есть ли какой-то способ чтобы не прописывать по 5 медиа-запросов?
Я не поняла, зачем 5 media.
Вы же не меняете пропорции картинок на разных вьюпортах? Или меняете?
Если пропорции одинаковые, то один раз написал и хватит.
aspect-ratio или хак с паддингом (при поддержке гридов хак с паддингом стал удобнее, чем без гридов)
К примеру в дизайне-макете у нас такая картинка, прямоугольная
Через админку я загружаю другую картинку, квадратную
И если я не буду ограничивать по высоте ее внутри своего блока-обертки, то она будет ломать верстку.
Получается на каждой ширине контейнера она будет сужаться и, чтобы было все по пропорциям, надо также менять высоту картинки.
Простой
Средний
