如何使用Wordpress缩小首页上的滑块大小

Question

我有一个使首页（https://meltrac.com.au）上的标题图像变小的问题。我仍然希望它能填满整个页面，但是我想编辑高度。

有人可以帮助我吗？

Answer 1

[看起来图像的高度由使用Javascript的轮播插件动态控制。同样，照片看起来既是<img>元素又是背景图像。前者显示在屏幕宽度768px以下。

您可以尝试使用CSS限制轮播的高度。在下面的示例中，我将其设置为视口高度的66％。在显示<img>元素时，我也将背景图像居中并在底部添加了一些空白，以便对下面的内容进行比较难。

这将添加到您主题的Custom CSS输入中，如果有的话。

//Limit the carousel height
.home .home-banner .owl-item.active > .item,
.home .home-banner .owl-item.active,
.home .home-banner .owl-stage, .home .home-banner .owl-stage-outer,
.home .home-banner .owl-carousel {
    max-height: 66vh;
}

//Center the background image
.home .home-banner .owl-item.active > .item {
    background-position: center !important;
}

//Add some white-space on smaller screens
.home .home-banner .owl-carousel .owl-item img {
    margin-bottom: 40px;
}