使用IE11缩放/拉伸图像，但不使用Chrome/Firefox

因此，在IE11下显示图像时，swiper（？）的表现并不完美。这些图像在Chrome和Firefox上完美呈现。使用IE11缩放/拉伸图像，但不使用Chrome/Firefox

下面的代码（对于它的价值，它是产生它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%; 
}

如果有人可以帮忙我，这将不胜感激。

来源

2017-03-31 David Vallee Delisle

你能在这里发布图片的相关HTML和CSS吗？ – Goose

图像不够。我们需要查看您的代码才能提供帮助！ –

对不起，我在帖子中添加了代码。链接也在图片下方。 –

该图片本身也有max-width: 100%;。实际宽度由.swiper-container .swiper-container-horizontal定义，但在这之间有几层div s和width: 100%。

此问题可能比理解更容易解决。我在Linux上，但我会做一些猜测。

这可能是因为图像没有宽度，IE使用最大宽度。

尝试在图像上定义宽度。

尝试删除最大宽度，和/或将其应用于父项。

来源

2017-03-31 21:28:22 Goose

是的，我尝试过，删除宽度，使其成为“自动”，与％围绕在一起，这简直是丑陋。为什么IE还是要成为特别的人...... –

使用IE11缩放/拉伸图像，但不使用Chrome/Firefox

回答

相关问题