如何将三张图片的总宽度设置为div的宽度？

Question

.row_1 中有三个图像，我希望这三个图像的总宽度与 .row_1 的宽度匹配，同时还确保所有图像具有相同的高度。如何在不进行硬编码的情况下实现这一目标？

示例：

为了更好地理解，这是一个直观的表示。我希望通过调整其高度来将三个图像放入 div 中，同时确保它们都具有相同的高度。”

JSX：

<div className='Gallery'>
    <div className='row_1'>
        <img src='/gallery_img_1.png' />
        <img src='/gallery_img_2.png' />
        <img src='/gallery_img_3.png' />
    </div>
</div>

CSS：

.Gallery img {
    display: block;
    object-fit: contain;
}

.Gallery .row_1 {
    display: flex;
    width: 100%;
}

Answer 1

因此将图像设置为

height: 100%

和

object-fit: cover;

:

.gallery {
  width: 400px;
  height: 200px;
  display: flex;
}

.gallery img {
  flex: auto;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

<div class="gallery">
  <img src="https://picsum.photos/300/400" alt="">
  <img src="https://picsum.photos/400/300" alt="">
  <img src="https://picsum.photos/200/400" alt="">
</div>