Flexbox divs按图像调整大小

Question

Example page

Firefox / IE10 / Opera，upong缩小窗口，将图像维持在当前大小，完全没有缩放。

Chrome是唯一能够按照我的意愿按比例缩小所有内容的产品。我无法判断Chrome是做错了什么，或是其他所有浏览器，或者如何修复它。

HTML

<section>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
</section>

CSS

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
}

.card {
  margin: 0 5px;
  position: relative;
}
.card img {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  display: block;
  max-height: 100%;
  max-width: 100%;
}

Answer 1

flexbox spec在过去几年中经历了许多变化，各种浏览器都实现了不同版本的规范。此时你不太可能会看到兼容行为的方式。特别是IE10和Safari都有an old version of the spec的主要工作实现。 Firefox有recently implemented support，但它是not enabled by default。

特别要注意的是，Flexbox的原始设计基于XUL的Mozilla CSS扩展，用于分发空白空间，而不是重新调整已经具有固有大小的元素。出于这个原因，可能无法实现您在所有浏览器中的目标。

如果您仍然有兴趣在真实网站中使用flexbox，请查看Modernizr，特别是flexbox和flexboxlegacy的测试，您几乎肯定会结束为这两种情况编写一套规则。

以下是我安装的浏览器中的一些屏幕截图：

Firefox 21：

Firefox 22：

Chrome 28：

歌剧院15：

鉴于较新版本的Firefox和Opera看起来与Chrome相同，我认为这是符合规范当前状态的正确行为。其他浏览器因此做错了。至于你能做些什么，除了我上面已经说过的话之外，我说的不多 - 使用基于旧浏览器中检测到的支持的替代方法。