在 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

测试