Предотвращение обрезки изображений flexbox с изменяемым размером границами окна или окна браузера. ⇐ CSS

[Anonymous]

Я пытаюсь расположить пары изображений горизонтально рядом друг с другом так, чтобы:

• оба изображения занимали примерно одну и ту же область независимо от их расположения. относительные соотношения сторон
• каждое изображение помещается в области просмотра по вертикали
• изображения, расположенные рядом друг с другом, помещаются в области просмотра по горизонтали

Мне очень близок следующий макет, но изображения исчезнут слева и справа от страницы, когда область просмотра имеет определенные формы и размеры.

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

@import url('reset.css'); /* https://meyerweb.com/eric/tools/css/reset/ */
:root {
background-color: oklch(95.25% 0.0187 235.01);
}
.diptych-area {
display: flex;
width: min(90vh, 100vw);
height: 90vh;
margin: auto;
flex-direction: row;
justify-content: center;
align-items: center;
container-type: size;

figure {
&.left {
display: flex;
justify-content: end;
flex-basis: calc((var(--left-aspect-ratio) / (var(--left-aspect-ratio) + var(--right-aspect-ratio))) * 100vw); }
&.right {
display: flex;
justify-content: start;
flex-basis: calc((var(--right-aspect-ratio) / (var(--left-aspect-ratio) + var(--right-aspect-ratio))) * 100vw); }
box-sizing: border-box;
img {
max-height: 100cqh; } } }

figure {
flex-basis: content;
position: relative;
margin: 0 1rem;
scroll-snap-align: center;

& img {
display: block;
box-sizing: border-box;
max-height: 80vh;
max-width: min(100vh, 100cqw);
border: 24px solid white; }


test 1 2 3


[img]https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Escaleras_a_la_Catedral_--_2023_--_Burgos%2C_Castilla_y_León%2C_España.jpg/1365px-Escaleras_a_la_Catedral_--_2023_--_Burgos%2C_Castilla_y_León%2C_España.jpg[/img]


[img]https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Himalayas%2C_Cholatse%2C_Nepal.jpg/1280px-Himalayas%2C_Cholatse%2C_Nepal.jpg[/img]


test 1 2 3


[img]https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Фрагмент_церкви._Дошки_оббивки.jpg/682px-Фрагмент_церкви._Дошки_оббивки.jpg[/img]


[img]https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Crack_climbing_in_Indian_Creek%2C_Utah.jpg/681px-Crack_climbing_in_Indian_Creek%2C_Utah.jpg[/img]


test 1 2 3



[img]https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flussregenpfeifer_im_flachen_Wasser_01.jpg/1219px-Flussregenpfeifer_im_flachen_Wasser_01.jpg[/img]


[img]https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Galería_Sciarra%2C_Roma%2C_Italia%2C_2022-09-16%2C_DD_117-119.jpg/818px-Galería_Sciarra%2C_Roma%2C_Italia%2C_2022-09-16%2C_DD_117-119.jpg[/img]

При этом размере окна все в порядке:

но при изменении размера фотографии не уменьшаются для выполнения третьего условия:


Не могу понять, как получить изображения чтобы уменьшиться соответствующим образом в соответствии с горизонтальным размером области просмотра.

Подробнее здесь: https://stackoverflow.com/questions/782 ... ox-or-brow