Keep image ratio using max-width and max-height in

问题:

I'm trying to get an image to fit inside a container while keeping it's size ratio. The image should take full height or width depending on orientation. My solution does work on all browsers I've tested but IE11(works in 10 and 9 surprisingly).

In IE 11 the image is cropped on the right. I'd like a pure css way if possible and I don't care about centering it.

Here is the 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;
}

回答1:

This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)

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

works for me. Flexbox for the parent seems ok, so even centering is easy.

Another option is

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

on the img, instead of flex: 1 , increasing compatibility with Firefox. See comments and bug report for more info.

回答2:

.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;
}

回答3:

Use

vw - for width instead of %

and

vh - for height instead of %

that is supported in older versions like IE11.

https://jsfiddle.net/wagad0u8/1/

To ONLY apply the changed code to IE10+ use:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
.img-flux img {
max-width : 100vw;
max-height : 100vh;
}