I was completely tortured with math, I'm already starting to just guess. (You need to make a gallery, like masonry or justifeid, only without js, and horizontal.
You can calc, you can flex, you can custom-properties, you can not grid.
This is what happened (do not pay attention to the quality of the code, the main thing is to make it work, then we will comb it):
.pic-flex { --var-m: 8; display: flex; } .pic-flex div { --var-r: calc(1vw * var(--var-a) / 150); box-sizing: border-box; background-repeat: no-repeat; background-size: contain; padding-left: calc(var(--var-w) / var(--var-h) * var(--var-r)); height: var(--var-r); } .pic-flex div:not(:last-child) { margin-right: calc(var(--var-m) * 1px); margin-bottom: calc(var(--var-m) * 1px); } <div class="pic-flex" style="--var-a: calc(1200 + 800 + 800 + 2 * var(--var-m));"> <div style="--var-w: 1200; --var-h: 768; background-image: url(//placehold.it/1200x768);"></div> <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> </div> <div class="pic-flex" style="--var-a: calc(800 + 1360 + 800 + 2 * var(--var-m));"> <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> <div style="--var-w: 1360; --var-h: 768; background-image: url(//placehold.it/1360x768);"></div> <div style="--var-w: 800; --var-h: 600;; background-image: url(//placehold.it/800x600);"></div> </div> <div class="pic-flex" style="--var-a: calc(1366 + 1920 + 1 * var(--var-m));"> <div style="--var-w: 1366; --var-h: 776;; background-image: url(//placehold.it/1366x776);"></div> <div style="--var-w: 1920; --var-h: 768; background-image: url(//placehold.it/1920x768);"></div> </div> It is necessary that this is the case (the aspect of the images should be normal by itself): 
