- Отображаются в одну строку.
- Сохранять индивидуальное соотношение сторон (без искажений).
- Иметь одинаковую высоту для всех изображений.
- Совместно заполнять всю ширину родительский контейнер, не оставляя пробелов и переполнений.
- Высота изображения (и контейнер) должны динамически корректироваться, чтобы все изображения располагались по горизонтали.
Я понимаю, что 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
