I'm currently using Owl Carousel and am wondering if there's a way to adjust image sizes so that the height of each image is consistent.
(我目前正在使用Owl Carousel,想知道是否有一种方法可以调整图像大小,以使每个图像的高度保持一致。)
I'm using this plugin to display my photography, and I have both landscape and portrait sizes. (我正在使用此插件来显示我的摄影作品,并且具有横向和纵向尺寸。)
I tried using autoWidth in the JS but it makes my portrait images too large and my landscape images too short, how do I get all the images to have a set height? (我尝试在JS中使用autoWidth,但是这会使我的人像图像太大而我的风景图像太短,如何使所有图像都具有设定的高度?)
I tried adjusting the CSS, but the landscape images seem to be behind the next image and doesn't display the full width. (我尝试调整CSS,但是横向图像似乎在下一个图像后面,并且不显示完整宽度。)
It looks like there is a set width, and when I adjust the width, the image just gets stretched. (看起来好像有一个设定的宽度,当我调整宽度时,图像就被拉伸了。)
I have 19 items in the carousel. (轮播中我有19个项目。)
Also tried adjusting the items in the responsive part of the JS, when I adjust it to two items, the landscape images are the right proportions but the portrait images end up being stretched. (还尝试调整JS响应部分中的项目,当我将其调整为两个项目时,横向图像是正确的比例,但纵向图像最终被拉伸了。)
Any ideas on how to fix? (有关如何解决的任何想法?)
Here's the CSS code I've used:
(这是我使用的CSS代码:)
#demos img{
display: inline-block;
max-width: auto;
height: 500px!important;
margin-bottom: 30px;
}
Javascript:
(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
}
}
})
})
ask by abc0213 translate from so 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…