Как заставить Internet Explorer 11 правильно отображать пропорции изображения?

Question

Если вы посмотрите на эту страницу в Internet Explorer 11, вы увидите, что соотношение сторон изображения неправильное - изображение растянуто по вертикали. IE 11 упорно показывает первоначальную высоту изображения. Все остальные браузеры (последние версии Chrome, Firefox и Edge) отображаются корректно. Почему этот код CSS не работает с 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;
}

Answer 1

Согласно этой дискуссии , похоже, есть ошибка в реализации IE flexbox, которую можно обойти, добавив следующий код в стили CSS для вашего изображения:

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

Answer 2

Ссылка Петра была очень полезна - min-height:1px решил проблему. это не помогло, тогда я добавил ее к img, но к .sec-content > div. и я немного удалил свойства flexbox. Конечный 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%;
}

Answer 3

Я бы предположил, что оно растягивает изображение, потому что значение по умолчанию для align-self равно stretch. Попробуйте установить align-self: center; на изображении

align-self: center;

Также вы должны удалить атрибут высоты из тега.