Непрерывная масонство/масонство галереи с полной шириной, поддерживающая соотношение аспектов изображения путем регулиро ⇐ CSS

[Anonymous]

Я хочу иметь галерею изображений миниатюр, где каждое изображение сохраняет соотношение сторон, а каждый ряд галереи-полная ширина. The only way to achieve this seems to be:

• select the number of images that will fit in the row at a normal height
• grow the height of the images in the row until the row is full width.

Is it possible to achieve this layout purely via CSS?. Я очень уверен, что ответ «нет», но я просто хотел проверить, так как я думаю, что это очень распространенная проблема (как фотографии OneDrive, так и фотографии Google, похоже, делают это с помощью ручных расчетов). Подходы CSS Я могу придумать использование Flex Box (или Grid) и иметь дополнительное пространство или выращивать /обрезать изображение, чтобы заполнить пространство.

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

.root{
display:flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
border:2px solid black;
& div{
border: 1px solid blue;
height: 100px;
}

& .portrait{
aspect-ratio: 3 / 2;
}
& .landscape{
aspect-ratio: 2 / 3;
}
}

.desired{
& div:nth-of-type(1), div:nth-of-type(2), div:nth-of-type(3){
height: 134px;
}
& div:nth-of-type(4), div:nth-of-type(5), div:nth-of-type(6){
height: 109px;
}
}
< /code>

Current:

s
w
s
s
s
s
w

Desired:

s
w
s
s
s
s
w

Подробнее здесь: https://stackoverflow.com/questions/795 ... ratio-by-a