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

【问题标题】：max-width of img inside flexbox doesn't preserve aspect ratioflexbox内img的最大宽度不保留纵横比
【发布时间】：2015-10-29 11:35:28
【问题描述】：

我正在尝试使用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。

谁能帮我解决这个问题？我知道我可以在没有flex 的情况下将img 居中，但我想了解这一点。

【问题讨论】：

有趣的问题。 FF 似乎认为弹性盒子内的任何东西本身也应该是灵活的。即使您删除了 align-self 属性，较大的图像仍然会以这种方式运行。不确定解决方法。

标签： css flexbox

【解决方案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 中使用 flexbox 模型时，img 的自然调整大小属性会丢失。 flexbox 仍然是一个相对较新的模型，供应商仍在完善他们的实现。

【讨论】：