CSS：如何使用flexbox控制不同尺寸图像库中的最大缩放比例

Question

给出一组不同比率不同的图像，但它们的边（高度或宽度）均为400px，我希望可以控制每行可以看到多少个元素，或者换句话说，可以控制浏览器的时刻宁愿缩小元素，也不愿继续增长它们。

约束：

显示的图像是完全随机的图像，事先不知道其大小/比率。
图像之间不应有可见的空间。
解决方案最好放在CSS和便携式中。
[图像必须按从左到右的顺序显示，列（column-count: x）不允许这样做（AFAIK）。

我的标记如下：

#images {
  flex-flow: row wrap;
  display: flex;
}

#images a {
  flex: auto;
}

#images img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  max-width: 100%;
}

<!DOCTYPE html>
<html>

<body>
  <h1>Gallery of different sized images</h1>
  <section id="images">
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/315" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/156" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/305" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/331/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/291/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/244" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/295/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/203" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/255/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/304/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/321" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/375/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/249/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/272/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/199" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/211" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/295/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/329" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/287" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/237" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/214/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/263/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/373" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/388/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/312" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/282/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/300" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/180/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/165/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/350" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/380/400" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/400/301" alt="kitty"></a>
    <a href="https://placekitten.com/"><img src="https://placekitten.com/281/400" alt="kitty"></a>
  </section>
</body>

</html>

对于较小的宽度，目前渲染效果很好：〜300px宽度的窗口：

[如果尺寸较大，例如〜800px的宽度，第一张图像放大了很多倍，几乎是2倍：

浏览器仅在达到〜840px宽度时才开始将2个元素放在同一行上：

[我希望尽快触发此弹性重新排列，以使图像尽可能少地放大（我什至希望我可以使用flex: 0 1 auto仅允许缩小而不能增长）。

到目前为止，我找到的唯一解决方案是外观更改，但不能在Firefox上使用，它是更改缩放倍数的方法，例如：在zoom: 0.7上设置为#images。这样可以得到理想的结果：

[<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9BWXlRYS5qcGcifQ==” alt =“具有约800px宽度的窗口的渲染]，缩放比例为0.7 [4]”>

是否存在任何干净且可移植的CSS解决方案？

给出一组不同比率不同但都具有400px的边（高度或宽度）的图像，我希望我可以控制每行可以看到多少个元素，或者换句话说，...

Answer 1

我通过模拟具有属性zoom，width和height的transform: scale()找到了一种CSS

的便携式方法。

CSS：如何使用flexbox控制不同尺寸图像库中的最大缩放比例

问题描述投票：0回答：1

1个回答

最新问题

CSS：如何使用flexbox控制不同尺寸图像库中的最大缩放比例

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1