I am trying to lay out pairs of images horizontally next to one another such such that:
- both images take up roughly the same area regardless of their relative aspect ratios
- each image fits vertically within the viewport
- the images side by side fit horizontally within the viewport
I am very close with the following layout, but the images will disappear off the left and right of the page when the viewport has certain shapes and sizes.
<!doctype html><meta charset=utf-8><style>@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; }</style><p>test 1 2 3<div class=diptych-area style="--left-aspect-ratio: 0.6667; --right-aspect-ratio: 1.5;"><figure class=left><img src="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"></figure><figure class=right><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Himalayas%2C_Cholatse%2C_Nepal.jpg/1280px-Himalayas%2C_Cholatse%2C_Nepal.jpg"></figure></div><p>test 1 2 3<div class=diptych-area style="--left-aspect-ratio: 0.6667; --right-aspect-ratio: 0.6667;"><figure class=left><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Фрагмент_церкви._Дошки_оббивки.jpg/682px-Фрагмент_церкви._Дошки_оббивки.jpg"></figure><figure class=right><img src="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"></figure></div><p>test 1 2 3<div class=diptych-area style="--left-aspect-ratio: 1.2; --right-aspect-ratio: 0.8;"><figure class=left><div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flussregenpfeifer_im_flachen_Wasser_01.jpg/1219px-Flussregenpfeifer_im_flachen_Wasser_01.jpg"></div></figure><figure class=right><div><img src="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"></div></figure></div>At this window size things are okay:
but when resized the photos do not get smaller to fulfill the third condition:
I can’t work out how to get the pictures to shrink appropriately according to the horizontal size of the viewport.