如何将 Flexbox 项目缩放到其包含图像的大小

Question

我想使用 Flexbox 创建一个响应式图像库，其中每行都有不同尺寸的图像，这些图像缩放到相同的高度，同时保持宽高比。例如，如果一行有一个

100x50

图像和一个

100x100

图像，则

100x50

图像应缩放为

200x100

，以便两个图像可以放置在高度为

100px

的行中。

换句话说，页面应该像这样拍摄两张图像：

并像这样显示它们：

我尝试通过在图像上使用

min-height: 100%

和

width: auto

来实现此目的。问题是，当

100x50

图像缩放到

200x100

时，它会溢出其

art-item

容器，并且当放置第二个图像时，它与第一个图像重叠，导致如下所示：

这是一个片段来演示我的尝试：

.art-container {
  display: flex;
}

.art-item>img{
  min-height: 100%;
  width: auto;
}

<div class="art-container">
  <div class="art-item"> <img src='https://dummyimage.com/100x50/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/100x100/000/fff'></img></div>
</div>

我相信如果有一种方法可以强制

art-item

继承其包含的

img

的宽度，这个问题就可以得到纠正。任何其他建议将不胜感激。

Answer 1

要使图像排成一行，同时保持它们高度一致，您需要做一些事情。其中一些您已经拥有，但您将需要它们：

• 弹性盒
• 图像行的特定高度
• 占据其父容器 100% 宽度和高度的图像
• 和

  object-fit: cover;

  保持图像的纵横比

.art-container {
  display: flex;
  flex-wrap: wrap;
}

.art-item {
  /* Set to any desired height */
  height: 200px;
}

.art-item > img {
  /* 100% width and height specifications makes image fill its parent */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio with full fill */
}

<div class="art-container">
  <div class="art-item">
    <img src='https://dummyimage.com/100x50/000/fff'>
  </div>
  <div class="art-item">
    <img src='https://dummyimage.com/100x100/000/fff'>
  </div>
</div>