2016-08-01 2 views
0

Когда я изменяю ширину окна браузера, изображения не масштабируются на IE 11 или ниже. Я работаю с Google Chrome. Я попытался добавить позицию: абсолютный, но уничтожил весь макет. CSS
Изображение:Изображение не масштабируется на IE 11

.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> 

Существует, как это выглядит на обоих браузерах. IMAGE

+0

Добавить html-код также. –

+0

Теперь он имеет HTML. –

+1

Можете ли вы поместить код в скрипке, поскольку вопрос об изображении ... – vignesh

ответ

0

Предлагаю вам посмотреть ваш макет here и все мобильные устройства. Ваш сайт работает правильно на всех устройствах. Нет смысла смотреть ваш макет в Internet Explorer с изменением размера экрана.

+0

Но попытайтесь запустить его на IE11/10, он явно не работает. http://quirktools.com/screenfly/#u=http%3A//licyter.mefistosoft.pl&w=800&h=600 –

+0

Я запустил его в IE11 http://imgur.com/a/SRIvx и его отлично работает, но если вы изменяете размер экрана, тогда возникает проблема, и я уже сказал вам, что нет смысла видеть ваш макет в IE с изменением размера экрана. –

+0

Но я хочу, чтобы можно было изменять размер экрана. Это точка вола этого поста. –

0

Может быть немного опоздал на вечеринку, но я нашел этот другой SO ответ, который может помочь вам: https://stackoverflow.com/a/42174237/1914261

IE11, кажется, есть некоторые проблемы с начальным значением flex-shrink property. Если вы установите его на ноль (он первоначально установлен в 1), он должен работать