Контейнер для изображений с сохранением пропорций

Question

Всем привет!

Есть контейнер, в котором размещаются изображения, их число может быть любым, в данном случае 3. Изображения размещаются в строку, без переносов. Сами изображения с произвольным соотношением сторон. Нужно, чтобы контейнер занимал всю ширину родителя, а изображения заполняли бы сам контейнер, но та, чтобы они сохраняли пропорции и не обрезались.

Я смог сделать это с помощью JS. Сама логика вроде бы не сложная и что-то мне подсказывает, что должен быть способ сделать это на CSS с помощью flex или grid, без применения JS. Но вот как!? Голову сломал, ничего не выходит без JS.

Вот мой код, можно посмотреть какое поведение требуется.

PS: сниппет ругается на ResizeObserver (работает через раз), хотя на локалке все работает нормально. Поэтому вот скрин, чтобы понимать какое поведение требуется.

PPS: скорректировал код, чтобы не было ошибки в сниппете.

const images = document.querySelectorAll('.card-image');
const container = document.querySelector('.line-container');

const aspects = Array.from(images).map(img => img.naturalWidth / img.naturalHeight);

function setSize () {
    const containerWidth = container.offsetWidth;
    const gap = Number(window.getComputedStyle(container).gap.match('[0-9]\+')[0]);

    let sumGap = -gap;
    let sumA = 0;
    for (let i = 0; i < images.length; i++) {
        sumGap += gap;
        sumA += aspects[i];
    }

    const height = (containerWidth - sumGap) / sumA;
    container.style.height = `${height}px`;
};

setSize();

let resizeCheck = false;

new ResizeObserver(() => {
    if (resizeCheck) return;
    resizeCheck = true;
    setTimeout(() => {
        setSize();
        resizeCheck = false;
    }, 500);
}).observe(container);

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.page {
    padding: 10px;
    background-color: #171717;
}

.line-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">
</head>
<body class="page">
    <div class="line-container">
        <div class="card">
            <img class="card-image" src="https://sun9-49.userapi.com/impg/jxEcH_hpITjQILm4FVbb9BCOwBx2foEDyOpFNw/CiOCtKgtZKA.jpg?size=807x341&quality=96&sign=b172d583ac7bfe7e69959368b5144a8b&c_uniq_tag=Y6C2s0gV6S621sl_Xylb7bHDAMDkaFRQvlzt958__FM&type=album" alt="">
        </div>
        <div class="card">
            <img class="card-image" src="https://cdn1.ozone.ru/s3/multimedia-j/6463737943.jpg" alt="">
        </div>
        <div class="card">
            <img class="card-image" src="https://images-cdn.9gag.com/photo/abM1NM9_700b.jpg" alt="">
        </div>
    </div>

    <script src="index.js"></script>
</body>
</html>

Answer 1

section {
  display: flex;
  align-items: center;
  gap: 8px;
}

img {
  flex: 1 1 auto;
  min-width: 0;
}

<section>
  <img src="https://sun9-49.userapi.com/impg/jxEcH_hpITjQILm4FVbb9BCOwBx2foEDyOpFNw/CiOCtKgtZKA.jpg?size=807x341&quality=96&sign=b172d583ac7bfe7e69959368b5144a8b&c_uniq_tag=Y6C2s0gV6S621sl_Xylb7bHDAMDkaFRQvlzt958__FM&type=album">
  <img src="https://cdn1.ozone.ru/s3/multimedia-j/6463737943.jpg">
  <img src="https://images-cdn.9gag.com/photo/abM1NM9_700b.jpg">
</section>

Answer 2

На чистом css если только установить нужную высоту картинки. В данном случае установим высоту контейнера 120 пикселей. Высоту картинки в 100%. Ширина автоматически подстроится.

* {
box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.page {
  padding: 10px;
  background-color: #171717;
}

.line-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 120px;
}

.card-image {
  display: block;
  width: auto;
  height: 100%;
}

<body class="page">
  <div class="line-container">
    <div class="card">
      <img class="card-image" src="https://sun9-49.userapi.com/impg/jxEcH_hpITjQILm4FVbb9BCOwBx2foEDyOpFNw/CiOCtKgtZKA.jpg?size=807x341&quality=96&sign=b172d583ac7bfe7e69959368b5144a8b&c_uniq_tag=Y6C2s0gV6S621sl_Xylb7bHDAMDkaFRQvlzt958__FM&type=album" alt="">
    </div>
    <div class="card">
      <img class="card-image" src="https://cdn1.ozone.ru/s3/multimedia-j/6463737943.jpg" alt="">
    </div>
    <div class="card">
      <img class="card-image" src="https://images-cdn.9gag.com/photo/abM1NM9_700b.jpg" alt="">
    </div>
  </div>
 </body>

БЛОГ НА HUSL

Контейнер для изображений с сохранением пропорций

Ответы (2 шт):