我目前正在使用Owl Carousel,想知道是否有一种方法可以调整图像大小,以使每个图像的高度保持一致。我正在使用此插件来显示我的摄影作品,并且具有横向和纵向尺寸。我尝试在JS中使用autoWidth,但是这会使我的人像图像太大而我的风景图像太短,如何使所有图像都具有设定的高度?
我尝试调整CSS,但是横向图像似乎在下一个图像的后面,并且不显示完整宽度。看起来好像有一个设定的宽度,当我调整宽度时,图像就被拉伸(stretch)了。轮播中我有19个元素。还尝试调整JS响应部分中的元素,当我将其调整为两个元素时,横向图像是正确的比例,但肖像图像最终被拉伸(stretch)了。关于如何解决的任何想法?
这是我使用的CSS代码:
#demos img{
display: inline-block;
max-width: auto;
height: 500px!important;
margin-bottom: 30px;
}
Javascript:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: true,
margin: 0
}
}
})
})
最佳答案
如果您使用的是Bootstrap,请添加img-responsive
类:
<img class="img-responsive">
这对我有用,我也面临着同样的问题。