html - 使用 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>