在Flexbox中缩放图像

Question

我在一排中有几张不同大小的图像。图片应自动调整大小以填充可用空间，同时保持其长宽比。

如果可能，它们的实际视觉尺寸应与其原始尺寸有关。我的意思是：在缩放版本中，较大的图像应大于较小的图像。

.Container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}

img {
    max-width: 100%;
}

<div class="Container">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
</div>

在这里可以找到一个小提琴：http://jsfiddle.net/ej5au8os/

在Firefox 62中，我得到了想要的结果。

Chrome和Edge似乎根本无法缩放图像。

我想念什么？

Answer 1

作为弹性项目的图像众所周知是古怪的。不要让它们弯曲物品。将它们包裹在div中。

这就是您所需要的（您的CSS很好，只是摆脱了一些不必要的规则）：

.Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}

<div class="Container">
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
</div>

jsFiddle demo

Answer 2

将图像包装在块中。
您可能需要使用自动前缀来实现跨浏览器的兼容性。

全球支持： 95.71％ (source)

.Container{
  width: 100%;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
}

<div class="Container">
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
</div>

  

通过 Chrome ， Firefox 和 Edge

进行了测试