Aiuto nella programmazione, risposte alle domande / Css / IE 11: l'immagine non viene ridimensionata correttamente in flexbox - css, css3, flexbox, internet-explorer-11

IE 11: l'immagine non si ridimensiona correttamente in flexbox - css, css3, flexbox, internet-explorer-11

Sto cercando di usare flexbox per posizionare due immagini in acolonna. In questo caso, la larghezza del contenitore div è inferiore alla larghezza dell'immagine. Il contenitore div è perfetto per l'immagine in Chrome, ma non è in IE e non so perché.

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="/images/http://placehold.it/480x360">
</div>

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

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

Questo è quello che ho in IE 11:

risposte:

14 per risposta № 1

IE11 sembra avere qualche problema con il valore iniziale del file flex-shrink proprietà. Se lo imposti a zero (inizialmente è impostato su 1), dovrebbe funzionare:

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="/images/http://placehold.it/480x360">
</div>

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