IE11で拡大/縮小された画像、Chrome/Firefoxでは拡大/縮小されていない画像

Question

IE11で画像を表示すると、swiper（？）は完全に動作しません。画像はChromeとFirefoxで完全にレンダリングされます。

And you can see this live here

ここでは、コード（それは価値があるもののために、それを生成laravelです）

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <i class="fa fa-car"></i> {{ trans('navs.general.pictures') }} 
      </div> 

      <div class="panel-body"> 
        <div class="swiper-container"> 
         <div class="swiper-pagination"></div> 
         <div class="swiper-button-next"></div> 
         <div class="swiper-button-prev"></div> 
         <div class="swiper-wrapper"> 
          @foreach($car->getMedia('vehicules') as $i) 
          <div class="swiper-slide" style="background-image:url({{ $i->getUrl() }})"> 
          <img data-src="{{ $i->getUrl() }}" src="{{ $i->getUrl() }}" alt="Photo"> 
          </div> 
          @endforeach 
         </div> 
        </div> 
      </div> 
     </div><!-- panel --> 
    </div><!-- col-md-10 --> 

</div><!--row--> 
@section('after-scripts') 
<script src='/js/swiper/swiper.jquery.js'></script> 
<script> 
    $(document).ready(function() { 
    //initialize swiper when document ready 
    var mySwiper = new Swiper ('.swiper-container', { 
     // Optional parameters 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
    }) 
    }); 
</script> 
@stop 
@section('before-styles') 
<link rel="stylesheet" href="/css/swiper/swiper.css"> 
<style> 
    html, body { 
     position: relative; 
     height: 100%; 
    } 
    .swiper-container { 
     width: 100%; 
     height: 100%; 
    } 
    .swiper-slide { 
     text-align: center; 
     font-size: 18px; 
     background: #fff; 
     width: auto; 
     /* Center slide text vertically */ 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     align-items: center; 
    } 
    </style> 
@stop 

EDITです： これはそれを修正：

.swiper-container img { 
    width: 100%; 
} 

は、誰かが助けることができたら私、それは非常に高く評価されるでしょう。

Answer 1

画像自体はmax-width: 100%;です。実際の幅は.swiper-container .swiper-container-horizontalで定義されていますが、その間にwidth: 100%を持つdivの数層があります。

この問題は、理解するよりも簡単に修正することができます。私はLinux上ですが、私はいくつかの推測をします。

画像に幅がないため、IEは最大幅を使用している可能性があります。

画像の幅を定義してみてください。

max-widthを削除したり、親に適用してみてください。