滑動輪播IE11錯誤：圖像過度拉伸

Question

我已經在Swiper插件的幫助下組裝了一個輪播。 它運行正常，沒有錯誤，除了Windows 10上的Internet Explorer 11以外。 在這里，圖像垂直過度拉伸：

 var swiper = new Swiper('.swiper-container', { slidesPerView: 4, spaceBetween: 20, pagination: { el: '.swiper-pagination', loop: true, draggable: true, clickable: true }, autoplay: { delay: 2000, disableOnInteraction: true, }, breakpoints: { 1024: { slidesPerView: 3, spaceBetween: 20, }, 768: { slidesPerView: 3, spaceBetween: 20, }, 640: { slidesPerView: 2, spaceBetween: 10, }, 480: { slidesPerView: 1, spaceBetween: 10, } } }); 

 .swiper-container { padding-bottom: 30px !important; } .swiper-slide { height: auto !important; } .swiper-container-horizontal>.swiper-pagination-bullets { bottom: -5px !important; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="swiper-container col-sm-12"> <div class="swiper-wrapper"> <div class="swiper-slide d-flex flex-column bg-light"> <img src="https://picsum.photos/id/1/600/600" class="img-fluid" alt=""> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <img src="https://picsum.photos/id/2/600/600" class="img-fluid" alt=""> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum dolor sit.</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <img src="https://picsum.photos/id/1/600/600" class="img-fluid" alt=""> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <img src="https://picsum.photos/id/2/600/600" class="img-fluid" alt=""> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum dolor sit.</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <img src="https://picsum.photos/id/1/600/600" class="img-fluid" alt=""> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <img src="https://picsum.photos/id/2/600/600" class="img-fluid" alt=""> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum dolor sit.</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script> 

此錯誤的原因是什么？ 如何解決？

更新-屏幕截圖：

Answer 1

我將圖像包裝在<div class="picture-container"></div> ，這是一種改進，但不是最佳解決方案：

 var swiper = new Swiper('.swiper-container', { slidesPerView: 4, spaceBetween: 20, pagination: { el: '.swiper-pagination', loop: true, draggable: true, clickable: true }, autoplay: { delay: 2000, disableOnInteraction: true, }, breakpoints: { 1024: { slidesPerView: 3, spaceBetween: 20, }, 768: { slidesPerView: 3, spaceBetween: 20, }, 640: { slidesPerView: 2, spaceBetween: 10, }, 480: { slidesPerView: 1, spaceBetween: 10, } } }); 

 .swiper-container { padding-bottom: 30px !important; } .swiper-slide { height: auto !important; } .swiper-container-horizontal>.swiper-pagination-bullets { bottom: -5px !important; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="swiper-container col-sm-12"> <div class="swiper-wrapper"> <div class="swiper-slide d-flex flex-column bg-light"> <div class="picture-container"><img src="https://picsum.photos/id/1/600/600" class="img-fluid" alt=""></div> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <div class="picture-container"><img src="https://picsum.photos/id/2/600/600" class="img-fluid" alt=""></div> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum dolor sit.</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <div class="picture-container"><img src="https://picsum.photos/id/1/600/600" class="img-fluid" alt=""></div> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <div class="picture-container"><img src="https://picsum.photos/id/2/600/600" class="img-fluid" alt=""></div> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum dolor sit.</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <div class="picture-container"><img src="https://picsum.photos/id/1/600/600" class="img-fluid" alt=""></div> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> <div class="swiper-slide d-flex flex-column bg-light"> <div class="picture-container"><img src="https://picsum.photos/id/2/600/600" class="img-fluid" alt=""></div> <div class="card-body d-flex flex-column"> <p class="text-muted">Lorem ipsum dolor sit.</p> <h4 class="m-0">Lorem ipsum dolor</h4> <h5 class="small">Aliquam voluptates, quisquam illum.</h5> <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p> <div class="mt-auto"> <a href="#" class="btn btn-sm btn-primary">More</a> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>