title: How to force Internet Explorer 11 to display image aspect ratio correctly?
body: <p>If you look at <a href="https://eoy.ee/oosorr/test" rel="nofollow noreferrer">this page</a> with Internet Explorer 11, you can see images aspect ratio is uncorrect - image is vertically stretched. IE 11 stubbornly displays image's original height. All other browsers (latest Chrome, Firefox and Edge versions) displaying correctly. Why this css code not working with IE 11?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;section class="content-6 sec-content"&gt;
  &lt;div class="container sec-right"&gt;
  &lt;div&gt;
  &lt;img src="https://eoy.ee/oosorr/images/8.jpg" alt="Nõmmemännik" width="1280" height="853" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>img {
  width:100%;
  height:auto;
  max-width: 100%;
  }
  
  .sec-content{
  display:-ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction:column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: end;
  justify-content: flex-end;
  }
  
  .sec-content &gt; div{
  padding-bottom:50px;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction:row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  
  .sec-right{
  -ms-flex-pack: end;
  justify-content: flex-end;
  }
  
  .sec-right &gt; div{
  display:-ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction:column;
  padding:35px 45px;
  position: relative;
  z-index: 10;
  width: 90%;
  }
  
  .sec-right &gt; div::before {
  background: rgba(0,0,0,0.4);
  content:" ";
  top:0;
  bottom:0;
  width:3000px;
  position: absolute;
  z-index: -100;
  }
  
  .sec-right &gt; div::before {
  left: 0;
  }
  </code></pre>