Question

好的，我意识到这是一个常见的问题，但我似乎无法在Kajabi内解决它。

我有一个背景英雄形象，我想在不切断任何部分的情况下保持健康。

不幸的是，如果不扭曲，我似乎无法正常工作。

这是我到目前为止所得到的：

网址：https://larockstarcreative.mykajabi.com/

.background-image--1523373811158 {
    url(https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefro…ion/themes/421005/settings_images/0mFPfSEYTiGurjJOLMNx_heytherebanner1.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

有没有办法让它始终缩放到100％宽度并调整到适当的高度而不切断顶部或底部？

/福利局

编辑：好的，通过使用下面的样式规则，我已经阻止它切断顶部或底部。但是，它仍然没有延伸到填充页面：

.background-image--1523373811158 {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-size: contain;
        background-repeat: no-repeat;  
}

编辑：这似乎与删除通常在Kajabi的“英雄区块”中填充的标题和正文副本有关。通过将子列大小设置为最小高度160px，我已经接近了。

这是最新的：

.background-image--1523373811158 .col-sm-8 { min-height: 160px; }

.background-image--1523373811158 {
    overflow-y: hidden ! important;
    overflow-x: hidden ! important;
    background-size: contain;
    background-repeat: no-repeat;
}

Answer 1

如果背景适合而不切断任何部分，您可以使用CSS规则：

background-size: contain;

如果您希望使用img标记，可以通过以下方式获得一些效果：

object-fit: contain;

Answer 2

好的，在尝试了许多不同的方法并且不断使用Chrome检查后，终于解决了它。

缺少的部分是Kajabi在某些屏幕尺寸上应用的左右填充规则。

以下是我添加的样式规则。请注意，对于那些从头开始构建的人来说，这不是一个解决方案，而是那些与Kajabi特别遇到同样问题的人。

<style>
.section--1523373811158 { background-color: transparent; }

@media (min-width: 2281px) {
    .section--1523373811158 { padding: 400px 0; }
}

@media (max-width: 2280px) and (min-width: 1991px) {
    .section--1523373811158 { padding: 300px 0; }
}

@media (max-width: 1990px) and (min-width: 1676px) {
    .section--1523373811158 { padding: 250px 0; }
}

@media (max-width: 1675px) and (min-width: 1280px) {
    .section--1523373811158 { padding: 200px 0; }
}

@media (max-width: 767px) and (min-width: 670px) {
    .section--1523373811158 { padding: 45px 0; }
}

.background-image--1523373811158 .col-sm-8 { min-height: 160px; }

.background-image--1523373811158 {
    overflow-y: hidden ! important;
    overflow-x: hidden ! important;
    background-size: contain;
    background-repeat: no-repeat;
}
</style>

强制Kajabi背景图像始终适合

2 个答案: