强制 Kajabi 背景图像始终适合

Question

好的，我知道这是一个常见问题，但我似乎无法在 Kajabi 中解决它。

我有一张背景主图，我希望它始终保持合身而不剪掉任何部分。

不幸的是，我似乎无法在不扭曲的情况下使其正常工作。

这是我目前得到的：

URL: 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% 宽度并调整到适当的高度而不切断顶部或底部？

/newb

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

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

编辑：这似乎与删除通常在 Kajabi 的 "hero block." 中填充的标题和 body 副本有关通过将 child 列大小设置为 min-height 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 背景图像始终适合

Force Kajabi background image to always fit

css

image

background-image

responsive-images