时间戳

首页 > 解决方案 > 在启用 autoWidth 的情况下具有相同的高度 OwlCarousel

javascript - 在启用 autoWidth 的情况下具有相同的高度 OwlCarousel

问题描述

我想在我的网站上展示一个小画廊，但是图像对自动宽度代码没有响应，并且它们的高度也不相同。

我创建了一个 JS Fiddle，以便更好地解释自己。

https://jsfiddle.net/w6axkqmz/1/

我尝试使用这个 CSS

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

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

标签： javascriptcssowl-carousel

解决方案

不要设置height:50vh它会将每个图像的高度设置为浏览器视口高度的 50%。但是没有设置高度，object-fit是行不通的。设置高度100%，使其与画廊的高度相同。

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

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

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

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

推荐阅读