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

我有一个问题,就是要缩小首页(https://meltrac.com.au)上的标题图像。我仍然希望它能填满整个页面,但是我想编辑高度。

有人可以帮助我吗?

tiancai61 回答:如何使用Wordpress缩小首页上的滑块大小

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

您可以尝试使用CSS限制轮播的高度。在下面的示例中,我将其设置为视口高度的66%。在显示<img>元素时,我也将背景图像居中并在底部添加了一些边距,以使下面的内容不会很难。

这将添加到主题的“自定义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;
}
本文链接:https://www.f2er.com/3162485.html

大家都在问