图像在IE 11上无法缩放

Question

When I change the width of the browser window images doesn't scale on IE 11 or below. I does work with Google Chrome. I tried to add position: absolute, but it destroying whole layout.
Image 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;
  }
}

Parent and img both have display: block; box-sizing: border-box; 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>

There is how it looks on both browsers. IMAGE

Answer 1

I suggest you to see your layout here and all mobile devices, Your website is working properly in all devices. There is no meaning to watch your layout in internet explorer with resizing the screen.

Answer 2

Might be a little late to the party, but I found this other SO answer that might help you: https://stackoverflow.com/a/42174237/1914261

IE11 seems to have some trouble with the initial value of the flex-shrink property . If you set it to zero (it is initially set to 1), it should work