title: Keep image ratio using max-width and max-height in IE 11
body: <p>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). </p>
  
  <p>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.</p>
  
  <p>Here is the JSFiddle : <a href="https://jsfiddle.net/wagad0u8/" rel="noreferrer">https://jsfiddle.net/wagad0u8/</a></p>
  
  <pre><code>&lt;div class="owl-item" style="width: 465px;"&gt;
    &lt;a class="img-flux" href="page1.html"&gt;
      &lt;img alt="omg" src="http://placehold.it/1000x100"&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="owl-item" style="width: 465px;"&gt;
    &lt;a class="img-flux" href="page1.html"&gt;
      &lt;img alt="omg" src="http://placehold.it/400x780"&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  .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;
  }
  </code></pre>