wake-up-neo.com

Beibehalten des Bildverhältnisses mit max-width und max-height in IE 11

Ich versuche, ein Bild so zu erhalten, dass es in einen Container passt, während das Größenverhältnis beibehalten wird. Das Bild sollte je nach Ausrichtung die volle Höhe oder Breite haben. Meine Lösung funktioniert mit allen Browsern, die ich getestet habe, außer IE11 (funktioniert überraschend in 10 und 9). 

In IE 11 wird das Bild rechts abgeschnitten. Ich würde gerne einen reinen CSS-Weg haben, wenn möglich, und es interessiert mich nicht, ihn zu zentrieren.

Hier ist das JSFiddle: https://jsfiddle.net/wagad0u8/

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/1000x100">
  </a>
</div>

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/400x780">
  </a>
</div>

.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align:middle;
}
#content-block *:last-child {
    margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
    height: 100%;
}
.img-flux {
    background-color: #ECECEC;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.owl-item{
  float:left;
  height:300px;
  margin-bottom:50px;
}
13

Dies scheint ein Fehler in IE11 zu sein: Bug Report . flex: 1 hinzufügen (wie im Bericht)

.img-flux img {
    flex: 1;
    max-width: 100%;
    max-height: 100%;
}

funktioniert bei mir. Die Flexbox für das übergeordnete Element scheint in Ordnung zu sein, so dass selbst das Zentrieren einfach ist.

Eine andere Möglichkeit ist 

flex: 0 0 auto;  /* IE */
object-fit: scale-down; /* FF */

img anstelle von flex: 1, wodurch die Kompatibilität mit Firefox erhöht wird. Weitere Informationen finden Sie in den Kommentaren und Fehlerberichten.

28
benzkji
.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align: middle;
}
0
Tushar