Zoomed/stretched images with IE11 but not with Chrome/Firefox - css

Question

Swiper (?) doesn't behave perfectly when displaying images under IE11. The images are rendered perfectly on Chrome and Firefox.
And you can see this live here
Here's the code (for what it's worth, it's laravel that generates it)
<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:
This fixed it:
.swiper-container img {
width: 100%;
}

Answer 1

The image itself has max-width: 100%;. The actual width is being defined by .swiper-container .swiper-container-horizontal but there's a few layers of divs with width: 100% between that.
This issue is probably easier to fix than it is to understand. I'm on Linux, but I'll give some guesses.
It may be that because the image doesn't have width, IE uses the max-width.
Try defining the width on the image.
Try removing the max-width, and/or applying it to a parent.