使用 flexbox 时如何在 CSS 中使图像保持相同的纵横比？

Question

我有很多使用 flexbox 布局的图像。大多数图像具有 2:1 的纵横比，但有些则没有（可能太宽或太高）。无论如何，我希望这些图像保持在 2:1 的纵横比范围内。

在https://jsfiddle.net/5h0gx7L4/ 中，您可以看到太宽的框很好，并且保持在 2:1 的纵横比范围内（不确定，但可能是因为flex-basis 控制宽度），但是太高的框突破了2:1 纵横比，即使它应该包含在内。

我不能使用任何硬编码的高度，因为它是一种流畅且响应迅速的设计，并且所有内容都会随着您更改窗口大小而上下缩放。但是包含图像的 div 应该有 2:1 的纵横比，这样里面的任何图像都包含在其中并且不会变大。

div
{
  display: flex;
  flex-wrap: wrap;
}

div > div {
  flex-basis: 25%;
}

img {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/800x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x400/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
</div>

Answer 1

试试这个：

div {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

div > div {
    flex-basis: 25%;
    display: block;
    padding-bottom: 12.5%;
    height: 0;
    position: relative;
}

img {
    border: 1px solid black;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
}

<div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/800x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x400/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
</div>

Answer 2

您可以将高度设置为零并使用padding-top 或padding-bottom 作为纵横比，因为它基于元素的宽度。在您的情况下，它应该如下所示：

div > div {
  flex-basis: 25%;
  height: 0;
  padding-bottom: 12.5%; /* 25/2 = 2:1 */
}

Updated jsfiddle

编辑：忽略我的回答，查看 cmets 和 Kravimir 的解决方案