使用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 

編輯： 這個固定：

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

如果有人可以幫忙我，這將不勝感激。

Answer 1

該圖片本身也有max-width: 100%;。實際寬度由.swiper-container .swiper-container-horizontal定義，但在這之間有幾層div s和width: 100%。

此問題可能比理解更容易解決。我在Linux上，但我會做一些猜測。

這可能是因爲圖像沒有寬度，IE使用最大寬度。

嘗試在圖像上定義寬度。

嘗試刪除最大寬度，和/或將其應用於父項。