Question

我想在我的网站上显示一个小画廊，但是图像对AUTOWIDTH CODE没有响应，并且它们的高度不同。

我创建了一个JS小提琴，以便可以更好地说明自己。

我尝试使用此CSS

.gallery .owl-carousel .owl-stage {
    display: flex !important;
}
.gallery .owl-carousel .owl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

但是将矩形图像保留为正方形。

Answer 1

请勿设置height:50vh，它会将每个图像的高度设置为浏览器视口高度的50％。但是如果不设置高度，object-fit将无法工作。将高度设置为100%，使其与图库的高度相同。

相对JSFiddle https://jsfiddle.net/2psgqb3v/

需要设置width和height的原因是因为浏览器需要将图像/对象适配到该高度。如果未指定，浏览器将采用图像的高度/宽度进行渲染。

解决方案是使用媒体查询来设置图像的宽度和高度。

相对小提琴https://jsfiddle.net/74rok0yg/

与启用autoWidth的高度相同OwlCarousel

1 个答案: