Flexbox维持不同尺寸图像的纵横比

Question

在此网站上浏览了数十个Flexbox问题之后，我认为是时候问了。

我想要一排的图像，其中行会伸展窗口的整个宽度，每个图像的高度相同，并且所有图像都保持其原始长宽比。例如，我有：

ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: stretch;
}

li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

<ul>
  <li>
    <img src="https://dummyimage.com/1920x1080"/>
  </li>
  <li>
    <img src="https://dummyimage.com/1400x1000"/>
  </li>
  <li>
    <img src="https://dummyimage.com/500"/>
  </li>
</ul>

问题在更改高度时保持图像宽高比非常相似，但是这些答案的问题是所有图像都是相同的纵横比。

Answer 1

如果比率知道如下。请注意，在定义每个图像比率的情况下使用变量

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}

li {
  flex-grow: calc(var(--r));
  flex-basis: 0;
}

img {
  max-width: 100%;
}

<ul>
  <li style="--r: 1920/1080">
    <img src="https://dummyimage.com/1920x1080"/>
  </li>
  <li  style="--r: 1400/1000">
    <img src="https://dummyimage.com/1400x1000"/>
  </li>
  <li  style="--r: 500/500">
    <img src="https://dummyimage.com/500"/>
  </li>
</ul>

Answer 2

我最终梳理了 @temani afif ' /2442099/g-cyrillus“>@g-cyrillus '的方法：

let smoothImg = function () {
    const images = document.querySelectorAll("ul li img");
    for (image of images) {
        image.parentElement.style.flexGrow = image.offsetWidth/image.offsetHeight;
    }
};

window.onload = smoothImg;
window.onresize = smoothImg;

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}

li {
  flex-grow: 1;
  flex-basis: 0;
}

img {
  max-width: 100%;
}

<ul>
    <li>
        <img src="https://dummyimage.com/1920x1080" />
    </li>
    <li>
        <img src="https://dummyimage.com/1400x1000" />
    </li>
    <li>
        <img src="https://dummyimage.com/200x150" />
    </li>
    <li>
        <img src="https://dummyimage.com/300" />
    </li>
</ul>

但是，我意识到我最终尝试的是复杂，并且最好只使用图书馆： https ：//github.com/naturalatlas/image-layout