滑动轮播IE11错误：图像过度拉伸

Question

I have put together a carousel with the help pf the Swiper plugin. It works fine, with no bugs,except in Internet Explorer 11 , on Windows 10 . Here, the images are overstretched vertically:

 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> 

What is the cause of this bug? How can it be fixed?

UPDATE - screenshot:

Answer 1

I have wrapped the images in a <div class="picture-container"></div> and that is an improvement, but not an optimal solution yet:

 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>