调整 flex div 图像的大小而不是裁剪

Question

我有一个带有 3 个图像的 flex，如果窗口太小，我希望它们调整大小，当窗口首先变小时，它们会重新排序，以便它们垂直堆叠，当窗口变得更小时，图片会被挤压而不是调整大小希望保持图像具有适当的纵横比。

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  height: 16rem;
  max-width: 100%;
}

<div class="images">
  <div>
    <img src="http://placehold.it/150x200">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/150x100">
  </div>
</div>

Answer 1

首先要记住保持纵横比的基本事项（我相信您已经知道这一点）是只限制图像的一个维度。 （阅读this）

您已经在代码中破坏了这一点 - 导致在较小的屏幕宽度处“挤压”：

.images img {
  height: 16rem;
  max-width: 100%;
}

当窗口首先变小时，它们会重新排序，以便垂直堆叠 当窗口变得更小时，图片会被挤压而不是 调整大小后，我希望图像保持适当的纵横比。

以下是您的选择：

所以我猜你应该删除 max-width: 100% 并根据 16rem 高度保持宽度调整。

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  height: 16rem;
  /*max-width: 100%;*/
}

<div class="images">
  <div>
    <img src="http://placehold.it/150x200">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/150x100">
  </div>
</div>

好吧，对于小宽度，您可以使用水平滚动。根据具体情况，如果需要，您可以使用一些媒体查询来调整小屏幕宽度的高度。

让我知道您对此的反馈。谢谢！

Answer 2

.images img{
      height: 16rem;
    max-width: 100%;
    object-fit: contain;
    }

Answer 3

对于 纵横比 修复，您可以使用 CSS3 object-fit 属性运行。 CSS3 Object-Fit

在你的图片上设置为：

.images img {
    object-fit: contain;
}

这应该可以保持图像的纵横比。

至于发生在 flex 容器内的 Wrapping，只需在您的代码中取出 flex-wrap 属性，这样它们都将保持在同一行，而不是随着容器尺寸变小而进行包装。

---

编辑

尝试将align-self CSS 属性添加到.images img，看看是否是您要查找的内容：

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  width: 100%;
  height: auto;
  object-fit: contain;
  align-self: flex-start;
}

希望这会有所帮助！