flexbox内部img的最大宽度不保留纵横比

Question

我正在尝试使用flex在img内简单地垂直居中div，但在每个浏览器中的工作方式都不同。

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
</div>

https://jsfiddle.net/e0m2d6hx/

Chrome很好，但在IE和FF中看起来它不适用于max-width。

任何人都可以帮我吗？我知道我可以将img置于flex的中心，但我想了解这一点。

Answer 1

如何修复IE和Firefox

以下更改应在Chrome，Firefox和IE上产生相同的结果：

• 将flex: 0 0 auto;添加到.flex-item img。这修复了IE
• 将object-fit: scale-down;添加到.flex-item img。这修复了Firefox

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
  object-fit: scale-down;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.pinaldave.com/bimg/ilovesamples.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://appslova.com/wp-content/uploads/2014/11/Android-.png">
    </div>
  </div>
</div>

JS小提琴： https://jsfiddle.net/7yyf3nob/

为什么会这样？

不幸的是我无法解释为什么浏览器之间的结果如此不同，除了在IE和Firefox中使用img模型时flexbox的自然调整大小属性会丢失。 flexbox仍然是一个相对较新的模型，供应商仍在改进他们的实现。