How to force Internet Explorer 11 to display image aspect ratio correctly?

user_4528318 0
Viewed 2395

If you look at this page 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?

html:

<section class="content-6 sec-content">
<div class="container sec-right">
<div>
<img src="https://eoy.ee/oosorr/images/8.jpg" alt="Nõmmemännik" width="1280" height="853" />
</div>
</div>
</section>

css:

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 > 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 > 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 > div::before {
background: rgba(0,0,0,0.4);
content:" ";
top:0;
bottom:0;
width:3000px;
position: absolute;
z-index: -100;
}

.sec-right > div::before {
left: 0;
}
flexbox internet-explorer css
2 Answers

According to this discussion there seems to be a bug with IE flexbox implementation, that can be worked around with adding the following code to your image css styles:

img {
    ...
    min-height: 1px;
}
user_103117330

Piotr link was very useful - min-height:1px solved the problem. it didn't help then i added it to img, but to .sec-content > div. and i removed flexbox properties a little. final css:

.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 > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
    min-height: 1px;
}

.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-right > div{
padding:35px 45px;
position: relative;
z-index: 10;
width: 100%;
}
user_45283180
Related