Как заставить изображения вместе заполнять ширину контейнера, сохраняя при этом одинаковую высоту и соотношение сторон сHtml

Программисты Html
Ответить Пред. темаСлед. тема
Anonymous
 Как заставить изображения вместе заполнять ширину контейнера, сохраняя при этом одинаковую высоту и соотношение сторон с

Сообщение Anonymous »

Я пытаюсь создать макет, в котором набор изображений:
  • Отображаются в одну строку.
  • Сохранять индивидуальное соотношение сторон (без искажений).
  • Иметь одинаковую высоту для всех изображений.
  • Совместно заполнять всю ширину родительский контейнер, не оставляя пробелов и переполнений.
  • Высота изображения (и контейнер) должны динамически корректироваться, чтобы все изображения располагались по горизонтали.
Изображение

Я понимаю, что flex-grow или width: auto можно использовать для управления шириной, но изображения либо в конечном итоге с разной высотой (из-за их аспекта) соотношения) или не заполнять ширину родительского элемента вместе.
Например:

Код: Выделить всё

[img]https://placehold.co/300x400[/img]
[img]https://placehold.co/400x300[/img]
[img]https://placehold.co/500x300[/img]

  • Контейнер должен занимать 100 % доступного горизонтального пространства.
  • Элементы img должны иметь одинаковую высоту, а их ширина должна корректироваться пропорционально, чтобы сохранить соотношение сторон.
  • Высота изображений должна определяться динамически, чтобы все изображения помещались внутри контейнера горизонтально.
    Как мне добиться такого макета? Мне нужно чистое решение CSS.
    Что я пробовал:
  • Использование flex-grow и flex-shrink свойства, но это приводит к тому, что изображения имеют разную высоту.
  • Установлена ​​фиксированная высота для контейнера, но она не адаптируется динамически.

    Будем признательны за любые рекомендации и примеры!

    Подробнее здесь: https://stackoverflow.com/questions/793 ... ning-equal
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Html»