Owl carousel 2 images with 16:9 aspect ratio (responsive) - css

Question

I am using owl carousel 2 and my problem is that I am looking for a solution to maintain images' aspect ratio while users resizing the browser window (responsiveness) based on the graphist's design.
which makes the developing harder, each item is a carousel includes 3 pictures,
I use this function in Scss to make my images 16:9 :
#function aspect($width) {
#return $width * 9 / 16;
}
which is not very interactive and always returns the static size of the image (though I've written media queries in different scales, still it's not very stable)
here is my carousel init code:
$('.owl-carousel').owlCarousel({
nav: false,
dots: true,
items: 1,
center: true,
//autoWidth: true,
loop: true,
});
and my HTML code is :
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<a href="#Url.Action("Video", "Service")">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="#service.serviceThumbpath" alt="#service.serviceName" title="#service.serviceName" />
</div>
#foreach (var thumb in videoThumbpath)
{
<div class="item">
<img src="#thumb" alt="#serviceName" title="#serviceName" />
</div>
}
</div>
<h5> #service.serviceName</h5>
<div class="details">
#{
_serviceRate = float.Parse(service.serviceRate);
}
<p class="pull-left">#service.VideoCount </p>
</div>
</a>
</div>
is there any solution that I can make it responsive images through owl carousel 2?
thanks a lot

Answer 1

I found the solution, I added these styles to my Scss file:
.outer {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: (9 / 16) * 100%;
}
> .inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
}
}
Then I changed my Html like this:
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<a href="#Url.Action("Video", "Service")">
<div class="owl-carousel owl-theme">
<div class="item outer">
<img src="#service.serviceThumbpath" alt="#service.serviceName" title="#service.serviceName" class="inner"/>
</div>
#foreach (var thumb in videoThumbpath)
{
<div class="item outer">
<img src="#thumb" alt="#serviceName" title="#serviceName" class="inner"/>
</div>
}
</div>
<h5> #service.serviceName</h5>
<div class="details">
#{
_serviceRate = float.Parse(service.serviceRate);
}
<p class="pull-left">#service.VideoCount </p>
</div>
</a>
</div>
and it worked maintaining 16:9 aspect ratio with owl carousel 2 :)
for the grid system of the page, I used This CodePen which was really helpful for my custom sizes.

Answer 2

Something like this should work. Adding an fixed width to container. Then with the img css it should keep its aspect ratio, as you aspect.
.item {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="item">
<img width="400" height="400" src="#service.serviceThumbpath" alt="#service.serviceName" title="#service.serviceName" />
</div>
Just an example , you can use your own widths and heights. Could also add .item width only at certain #media query.

Answer 3

I set the height and width as below:
.owl-carousel {
height: 100%;
overflow: hidden;
}
.owl-carousel .owl-item img {
display:block;
height:100%;
width: auto;
}
jQuery:
owl.owlCarousel({
items:3,
autoWidth: true,
});