我正在构建一个网站,其主页顶部有一个 Owl Carousel 。该网站正处于初步阶段,我在轮播方面遇到了问题。
我希望轮播保持响应,同时调整图像以填充窗口/屏幕的整个高度。换句话说,我不想调整图像大小;只是随着窗口变小而居中。现在,它们只是在窗口大小调整时缩小。
这是我当前的代码:
HTML
<section id="sidebar">
<div id="owl" class="owl-carousel">
<div class="item" id="item-1"><img src="assets/img/motel.jpg" alt=""></div>
<div class="item" id="item-2"><img src="assets/img/gas.jpg" alt=""></div>
<div class="item" id="item-3"><img src="assets/img/sofia.jpg" alt=""></div>
</div>
</section>
JS:
$(document).ready(function() {
$("#owl").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
items: 1,
autoplay: 3000,
stopOnHover: true,
loop: true,
});
});
CSS:
#owl .item img {
display: block;
widows: auto;
height: 100%;
min-height: 523px;
}
这里是 github 上完整站点(到目前为止)的链接:https://jnikkiyoke.github.io/project/
任何帮助将不胜感激!
最佳答案
最简单的方法是删除 <img/>
标记并使用 background
相反:
.item {
height: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#item-3{
background-image: url("assets/img/gas.jpg");
}
您还可以删除 min-height
上#owl .item img
您可能还想添加height: 100vh;
和width: auto;
。使用media queries不同的比例。
关于javascript - Owl Carousel 高度调节,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43335191/