15

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;
}
Mosset Jérémie
  • 310
  • 1
  • 4
  • 20

3 Answers3

36

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.

benzkji
  • 1,718
  • 20
  • 41
  • 2
    This works! You just have to use a css hack to target IE 11 as it will mess up things on at least FF. – Mosset Jérémie May 02 '17 at 07:24
  • Ha! Was not sure after I wrote this, because it screwed up things for me too! And then again didn't in IE. Walking on thing ice! – benzkji May 02 '17 at 14:56
  • Oddly enough this works for me without even adding flexbox to the parent.. And doesnt cause any issues in other browsers (FF is fine for me unlike Mosset) – Jemar Jones Aug 22 '17 at 14:43
  • @JemarJones flexbox is optional, but often useful in that context. But still, it is very strange, as it seems to depend on other circumstances if it works or not...absolut position of parent could be an issue, but I'm again not sure at all ;-) – benzkji Aug 23 '17 at 17:10
  • 2
    To prevent aspect ratio going off, I needed `flex: 0 0 auto` on the images, as mentioned in the bug report. Thanks for the link. – Josh Harrison Dec 20 '17 at 16:44
  • 2
    The Bug Report link no longer works. Microsoft has retired "Microsoft Connect". I'm guessing they still have the article hidden in one of the other sites, but I have no idea which one - they didn't feel it necessary to provide an updated URL for the referenced item. – Zarepheth Mar 29 '18 at 20:24
  • aarrff. very bad. a quick search didnt reveal any useful. glad if anyone finds the needle in the haystack... – benzkji Mar 31 '18 at 08:19
  • It seems like Microsoft Connect isn't archived anywhere(see [this issue](https://meta.stackoverflow.com/questions/363610/microsoft-connect-died-and-breaks-lots-of-links)). I could not find it on the wayback machine nor browsers cache(Yahoo, google and bing). It might be findable somewhere else Maybe [warrick](https://github.com/oduwsdl/warrick) would be able to find it but I'm not hopeful. – Mosset Jérémie Jun 07 '18 at 10:09
0
.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;
}
Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
Tushar
  • 46
  • 3
  • I'll see if it works when I'll get my hands on a windows. But if I remember well doing this make vertical images get out of their parent. – Mosset Jérémie Jan 07 '17 at 17:22
  • 10
    It's good practice on Stack Overflow to add an explanation as to why your solution should work. For more information read [How To Answer](http://stackoverflow.com/help/how-to-answer). – Fabian Schultz Jan 07 '17 at 17:42
  • It indeed messes up vertical images as they get 100% width and height. So they do not keep their ratios. – Mosset Jérémie Jan 09 '17 at 14:07
-4

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;
}
CodingSnow
  • 13
  • 4