Я пытаюсь создать макет, в котором набор изображений:
Отображаются в одну строку.
Сохранять индивидуальное соотношение сторон (без искажений).
Иметь одинаковую высоту для всех изображений.
Совместно заполнять всю ширину родительский контейнер, не оставляя пробелов и переполнений.
Высота изображения (и контейнер) должны динамически корректироваться, чтобы все изображения располагались по горизонтали.
Я понимаю, что flex-grow или width: auto можно использовать для управления шириной, но изображения либо в конечном итоге с разной высотой (из-за их аспекта) соотношения) или не заполнять ширину родительского элемента вместе.
Например:
Контейнер должен занимать 100 % доступного горизонтального пространства.
Элементы img должны иметь одинаковую высоту, а их ширина должна корректироваться пропорционально, чтобы сохранить соотношение сторон.
Высота изображений должна определяться динамически, чтобы все изображения помещались внутри контейнера горизонтально.
Как мне добиться такого макета? Мне нужно чистое решение CSS.
Что я пробовал:
Использование flex-grow и flex-shrink свойства, но это приводит к тому, что изображения имеют разную высоту.
Установлена фиксированная высота для контейнера, но она не адаптируется динамически.
Будем признательны за любые рекомендации и примеры!
Я пытаюсь создать макет, в котором набор изображений: [list] [*]Отображаются в одну строку. [*]Сохранять индивидуальное соотношение сторон (без искажений). [*]Иметь одинаковую высоту для всех изображений. [*]Совместно заполнять всю ширину родительский контейнер, не оставляя пробелов и переполнений. [*]Высота изображения (и контейнер) должны динамически корректироваться, чтобы все изображения располагались по горизонтали. [/list] [img]https ://i.sstatic.net/8UWYGMTK.png[/img]
Я понимаю, что flex-grow или width: auto можно использовать для управления шириной, но изображения либо в конечном итоге с разной высотой (из-за их аспекта) соотношения) или не заполнять ширину родительского элемента вместе. Например: [code] [img]https://placehold.co/300x400[/img] [img]https://placehold.co/400x300[/img] [img]https://placehold.co/500x300[/img]
[/code] [list] [*]Контейнер должен занимать 100 % доступного горизонтального пространства. [*]Элементы img должны иметь одинаковую высоту, а их ширина должна корректироваться пропорционально, чтобы сохранить соотношение сторон. [*]Высота изображений должна определяться динамически, чтобы все изображения помещались внутри контейнера горизонтально. Как мне добиться такого макета? Мне нужно чистое решение CSS. Что я пробовал:
[*]Использование flex-grow и flex-shrink свойства, но это приводит к тому, что изображения имеют разную высоту. [*]Установлена фиксированная высота для контейнера, но она не адаптируется динамически.
Будем признательны за любые рекомендации и примеры!
Я пытаюсь создать макет, в котором набор изображений:
Отображаются в одну строку.
Сохранять индивидуальное соотношение сторон (без искажений).
Иметь одинаковую высоту для всех изображений.
Совместно заполнять всю ширину родительский контейнер,...
Я загружаю разные изображения во время выполнения в QPixmap/QLabel. Изображения имеют разные размеры, но ширина и высота метки не должны меняться (например, 500 x 400 пикселей). Загруженные изображения должны масштабироваться до размера QLabel, но...
Извините, заголовок, должно быть, труден для понимания, но я не знаю, как его объяснить.
Как разместить изображение carouselMap в div carouselItem , с соотношением сторон 2/3, ширина (карты) составляет 100% ширины carouselItem ?
Я нарисовал рисунок...
Как сделать так, чтобы фоновое изображение соответствовало представлению, но сохраняло его соотношение сторон при использовании в качестве фонового рисуемого XML?
Ни один из для Android Значения :gravity дают желаемый эффект.
У меня есть веб-сайт, на котором я часто использую макет с двумя столбцами (используя Flex Box), чтобы отобразить один и тот же контент на двух разных языках, на латинском и английском языке. Латынь, как правило, более лаконичный язык, чем...