Image doesn't scale on IE 11
<p>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.
<br/>
Image css:</p>

<pre><code>.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;
  }
}
</code></pre>

<p>Parent and img both have <code>display: block; box-sizing: border-box;</code>
<br/>
HTML:</p>

<pre><code>&lt;article onclick="AddCookieWithAuction(1185)" id="auction-1185"&gt;
&lt;a class="auction-item-img-container" href="/Aukcje/PodgladAukcji/1185/1/1" style="background-image: url(/Content/images/backgrounds/empty.png)"&gt; &lt;/a&gt;
&lt;!-- This part is responsive --&gt;
&lt;div class="auction-item-desc"&gt;
    &lt;div class="auction-bar"&gt;
        &lt;h4 class="auction-bar-author"&gt;&lt;a href="/Aukcje/PodgladAukcji/1185/1/1"&gt;1&lt;/a&gt;&lt;/h4&gt;
        &lt;h5 class="auction-bar-title"&gt;&lt;a href="/Aukcje/PodgladAukcji/1185/1/1"&gt;1&lt;/a&gt;&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class="auction-price-container"&gt;
            &lt;div class="actual-price-holder"&gt;
                    &lt;span class="auction-price-label"&gt;Cena&lt;/span&gt;

                &lt;p class="auction-price"&gt;&lt;a href="/Aukcje/PodgladAukcji/1185/1/1"&gt;123 PLN&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
                        &lt;div class="auction-observe"&gt;
                &lt;a onclick="acc.onObservedButtonClick(1185, this)" class="fa fa-star-o observe-icon"&gt;&lt;/a&gt;
                &lt;a onclick="acc.onObservedButtonClick(1185, this)" class="add-observe"&gt;Dodaj do obserwowanych&lt;/a&gt;
            &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="auction-type-container"&gt;
        &lt;span class="auction-type"&gt;&lt;a href="/Aukcje/PodgladAukcji/1185/1/1"&gt;Aukcja w trakcie&lt;/a&gt;&lt;/span&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;/article&gt;
</code></pre>

<p>There is how it looks on both browsers.
<a href="http://i.imgur.com/l43HMTF.png" rel="nofollow">IMAGE</a></p>