IE 11：图像在 flexbox 中无法正确缩小

Posted 2023-03-05

【中文标题】IE 11：图像在 flexbox 中无法正确缩小

【英文标题】：IE 11: Image doesn't scale down correctly within flexbox

【发布时间】：2017-06-29 14:49:54

【问题描述】：

我正在尝试使用 flexbox 将两个图像放在一个列中。在这种情况下，div 容器的width 小于图像的width。在 Chrome 中，图像完全适合 div 容器，但在 IE 中却没有，我不知道为什么。

div.outer 
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;


div.inner 
  width: 100%;
  border: 1px solid red;


img 
  width: 100%;
  height: auto;

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

https://jsfiddle.net/Yifei/16cpckqk/

这就是我在 IE 11 中得到的：

【问题讨论】：

我无法解释这一点，但您始终可以在图像上设置 100% 的高度并手动定义 flexbox 的高度，如果有帮助的话:)

出于某种原因，这也可以通过在div.inner（或只是flex-shrink: 0）上设置flex: 0 0 auto 来解决。这很奇怪，因为为了让 div 缩小，你声明它不应该缩小。

【参考方案1】：

IE11 的flex-shrink property 的初始值似乎有些问题。如果将其设置为零（最初设置为 1），它应该可以工作：

div.outer 
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

div.inner 
  flex-shrink: 0;
  width: 100%;
  border: 1px solid red;

img 
  width: 100%;
  height: auto;

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

【讨论】：

您听起来好像设置flex-shrink: 0; 是确保正确初始值的正确方法。但是这里逻辑上正确的值是 1 就像我的mentioned，尽管0 恰好修复了它。

我没有说这是正确的方法，我的回答是解决问题的可能方法。我在回答时没有看到您的评论... sry

【参考方案2】：

接受的解决方案破坏了我在 ie 中的粘性页脚。所以我用以下不令人满意的“仅适用于ie JS”解决了这个令人不安的问题......。 px 值而不是“height:auto”对我有用。

 if(fuBrowser =='ie')
  var img = $("#teaser img");
    img.each(function() 
    $( this ).css(height: $( this ).height());
    );