flexbox中的img的最大宽度不保留长宽比 [英] max-width of img inside flexbox doesn't preserve aspect ratio

问题描述

我试图使用 flex 将 img

.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 。

It is good in chrome, but in IE and FF it looks like it doesn't work with max-width.

谁能帮我这个？我知道我可以集中 img 而不用 flex ，但我想理解这一点。

Can anyone help me with this? I know that I can center the img without flex but I want to understand this.

推荐答案

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

The following changes should result in the same result across Chrome, Firefox and IE:

• 添加 flex：0 0 auto; 到 .flex-item img 。 This fixes IE


• 添加 object-fit：scale-down; 到 .flex-item img 。这修复了Firefox



• Add flex: 0 0 auto; to .flex-item img. This fixes IE
• Add object-fit: scale-down; to .flex-item img. This fixes 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>

不能解释为什么浏览器之间的结果是如此不同，除非使用 flexbox时， img 的自然调整大小属性会丢失模型在IE和Firefox。 flexbox 仍是一个相对较新的模型，供应商仍在细化其实现。

Unfortunately I can't explain why the result between the browsers is so different other than it would appear that the natural resizing properties of an img are lost when using the flexbox model in IE and Firefox. flexbox is still a relatively new model and the vendors are still refining their implementations.

https://jsfiddle.net/7yyf3nob/

这篇关于flexbox中的img的最大宽度不保留长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！