我有一个问题,就是要缩小首页(https://meltrac.com.au)上的标题图像。我仍然希望它能填满整个页面,但是我想编辑高度。
有人可以帮助我吗?
我有一个问题,就是要缩小首页(https://meltrac.com.au)上的标题图像。我仍然希望它能填满整个页面,但是我想编辑高度。
有人可以帮助我吗?
看起来图像的高度由使用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;
}