如何使用 Wordpress 在主页上缩小滑块大小答案

【问题标题】：How to make slider size smaller on home-page using Wordpress如何使用 Wordpress 在主页上缩小滑块大小
【发布时间】：2020-03-01 09:33:21
【问题描述】：

我的主页 (https://meltrac.com.au) 上的标题图片变小了。我仍然希望它填满整个页面，但我想编辑高度。

谁能帮助我？

【问题讨论】：

欢迎来到 SO！如果您对 WordPress 等商业产品有任何疑问，您应该在 SuperUser 上提问。如果是关于您的代码，请发布。

标签： wordpress image header

【解决方案1】：

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

您可以尝试使用 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;
}

【讨论】：