css - 强制Kajabi背景图片始终适合

好的，我知道这是一个普遍的问题，但是我似乎无法在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％的宽度并调整大小到适当的高度，而又不切断顶部或底部？

/ newb

编辑：好的，通过使用下面的样式规则，我阻止了它切掉顶部或底部。但是，它仍然无法填充页面：

.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;
}

最佳答案

为了使背景适合而不截断任何部分，可以使用CSS规则：

background-size: contain;

如果要使用img标记，可以通过以下方法获得一些效果：

object-fit: contain;

关于css - 强制Kajabi背景图片始终适合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49775827/