Совсем замучился с математикой, уже начинаю просто гадать. ( Нужно сделать галерею, типа masonry или justifeid, только без js, и горизонтальную.
Можно calc, можно flex, можно custom-properties, нельзя grid.
Вот что получилось (на качество кода не обращайте внимание, главное чтобы заработало, потом причешем):
.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>
Нужно чтобы было так (аспект у картинок само собой должен быть нормальным):