如何在 Flexbox 中设置图像格式以避免溢出和裁剪

Question

我想使用 Flexbox 创建一个响应式图像库，其中每行的图像缩放到相同的高度，同时保留纵横比而不是裁剪。

为了强调我的意思，这里有一些不同尺寸的占位符图像和我尝试过的样式：

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

.art-item {
  border-color: red;
  border-style: solid;
}

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

<div class="art-container">
  <div class="art-item"> <img src='https://dummyimage.com/300x450/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x300/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/100x200/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/200x100/000/fff'></img></div>
  <div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></img></div>
</div>

代码笔

我使用

min-height: 100%

和

width: auto

将所有图像缩放到其行的高度，同时保留纵横比，但这会导致图像溢出其

art-item

容器，因此图像被裁剪。

Answer 1

您可以为艺术项目指定宽度和高度。例如 20vw（视口的 20%），然后使 img 元素宽度为 100%，高度为 100%。然后，它们将与作为艺术项目的父级相关。因此所有 img 元素与 art-item 具有相同的尺寸。然后为了防止图像拉伸，您可以添加 object-fit: cover;也来img吧。