Спасибо, но не совсем то.
Цель можно было примерно описать так -
Приводим все картинки к какой то одной ширине (например ширина контейнера.) Но высоты у них будут разные. Делим контейнер на прямоугольники, пропорционально высотам картинок. В прямоугольник вписываем картинку (object-fit: contain)
Хотелось сделать это просто на CSS, без JS.
CJS результат такой
<style>
body { display: flex; } /* только для примера */
.contv {
margin: 40px 20px;
border: 3px red solid;
height: 200px;
width: 130px;
display: flex;
flex-direction: column;
overflow: hidden;
align-items: stretch;
gap: 3px;
}
.contv > img {
min-height: 0;
object-fit: contain;
}
.contv > img:only-child {
height: 100%;
}
</style>
<body>
<div class="contv">
<img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
</div>
<div class="contv">
<img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
<img src="https://monolith1.izrukvruki.ru/img/catalog/i2/8a/e0/130ea9388-1050x1050-774160528-orig.jpg">
</div>
<div class="contv">
<img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
<img src="https://monolith1.izrukvruki.ru/img/catalog/i2/8a/e0/130ea9388-1050x1050-774160528-orig.jpg">
<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
<img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
<img src="https://monolith1.izrukvruki.ru/img/catalog/i2/8a/e0/130ea9388-1050x1050-774160528-orig.jpg">
<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<script>
window.addEventListener("load", () => {
document.querySelectorAll('.contv').forEach( cont => {
const imgs = [... cont.querySelectorAll('img')];
const hsum = imgs.reduce((h, im) => h + im.naturalHeight, 0);
imgs.forEach (im => im.style.height = im.naturalHeight/hsum*100 + '%');
})
})
</script>
<body>