Показать сообщение отдельно
  #10 (permalink)  
Старый 03.02.2022, 09:10
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Спасибо, но не совсем то.
Цель можно было примерно описать так -
Приводим все картинки к какой то одной ширине (например ширина контейнера.) Но высоты у них будут разные. Делим контейнер на прямоугольники, пропорционально высотам картинок. В прямоугольник вписываем картинку (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>

Последний раз редактировалось voraa, 03.02.2022 в 10:06.
Ответить с цитированием