web-dev-qa-db-ja.com

IE 11：flexbox内で画像が正しく縮小されない

flexboxを使用して列に2つの画像を配置しようとしています。この場合、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：

htmlcsscss3flexboxinternet-explorer-11
18
yifei3212

IE11では、 flex-shrinkプロパティ の初期値に問題があるようです。ゼロに設定すると（最初は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>
34
andreas

受け入れられた解決策は、すなわちで私の粘着フッターを破壊しました。だから私は次の非満足の「すなわちJSだけのために」でこの不穏な問題を解決しました...代わりに「height：auto」の代わりにpxの値を使用しました。

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