Изображение не масштабируется в IE 11
Когда я изменяю ширину окна браузера, изображения не масштабируются в IE 11 или ниже. Я работаю с Google Chrome. Я попытался добавить положение: абсолютное, но оно разрушило весь макет.
Изображение CSS:
.auction-item-img-container {
display: block;
height: 400px;
overflow: hidden;
position: relative;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media screen and (max-width: 1024px ) {
.auction-item-img-container {
height: 0;
padding-bottom: 100%;
}
}
@media screen and (max-width: 480px ) {
.auction-item-img-container {
height: 270px;
}
}
Родитель и IMG оба имеют display: block; box-sizing: border-box;
HTML:
<article onclick="AddCookieWithAuction(1185)" id="auction-1185">
<a class="auction-item-img-container" href="/Aukcje/PodgladAukcji/1185/1/1" style="background-image: url(/Content/images/backgrounds/empty.png)"> </a>
<!-- This part is responsive -->
<div class="auction-item-desc">
<div class="auction-bar">
<h4 class="auction-bar-author"><a href="/Aukcje/PodgladAukcji/1185/1/1">1</a></h4>
<h5 class="auction-bar-title"><a href="/Aukcje/PodgladAukcji/1185/1/1">1</a></h5>
</div>
<div class="auction-price-container">
<div class="actual-price-holder">
<span class="auction-price-label">Cena</span>
<p class="auction-price"><a href="/Aukcje/PodgladAukcji/1185/1/1">123 PLN</a></p>
</div>
<div class="auction-observe">
<a onclick="acc.onObservedButtonClick(1185, this)" class="fa fa-star-o observe-icon"></a>
<a onclick="acc.onObservedButtonClick(1185, this)" class="add-observe">Dodaj do obserwowanych</a>
</div>
</div>
<div class="auction-type-container">
<span class="auction-type"><a href="/Aukcje/PodgladAukcji/1185/1/1">Aukcja w trakcie</a></span>
</div>
</div>
</article>
Вот как это выглядит в обоих браузерах. ОБРАЗ
2 ответа
Может быть, немного опоздал на вечеринку, но я нашел этот другой SO ответ, который может помочь вам: /questions/23769346/ie-11-izobrazhenie-ne-korrektno-umenshaetsya-v-flexbox/23769348#23769348
IE11, похоже, имеет некоторые проблемы с начальным значением свойства flex-shrink. Если вы установите его на ноль (изначально он равен 1), он должен работать
Я предлагаю вам посмотреть ваш макет здесь и на всех мобильных устройствах, ваш сайт работает нормально на всех устройствах. Нет смысла смотреть свой макет в Internet Explorer с изменением размера экрана.