代码之家 › 专栏 › 技术社区 › kirschkern

在flexbox中缩放图像

flexbox css3 image css html

kirschkern · 技术社区 · 7 年前

我在一行中有几个不同大小的图像。图像应自动调整大小以填充可用空间,同时保持其纵横比。

如果可能的话,它们的实际视觉尺寸应该与其原始尺寸相关。我的意思是:在缩放版中,大图像应该比小图像大。

.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中,我得到了我想要的结果。

我错过了什么?

2 回复 | 直到 7 年前

Quentin 7 年前

您可能需要使用自动引用器以实现跨浏览器兼容性。

全球支持: (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>

测试铬和

Michael Benjamin William Falcon 7 年前

作为弹性项目的图像是出了名的古怪。不要把它们做成弹性物品。把它们包起来。

以下是您所需要的(您的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>

在flexbox中缩放图像

jsFiddle demo