Javascript 具有stellar.js大小问题的视差背景

在我的项目中，我有一个关于视差背景的小问题。我使用stellar.js是因为它看起来很容易使用。现在我遇到了一些关于背景图像高度的问题

您可以在这里看到当前的问题：如果您使用Overwatch角色朝着视差滚动背景再向下滚动一点

以下是html：

<div class="hero hero-inline" data-stellar-background-ratio="0.5" style="background-image:url(\' '. esc_attr($image) .' \');"></div>

当我在我的桌面上全屏（1920x1080或1600x900）时，结果相当不错；但一旦我调整窗口大小，视差效果会将背景图像滚动“太多”，并垂直“超出范围”：

我尝试了一些方法，但无法解决这个问题-如何获得可用的解决方案？其他网站只是在浏览器宽度变小时不水平调整背景图像的大小，以避免这个问题，但我不知道如何做到这一点

很高兴有任何建议， 弗洛

.hero {
width:100%;
background-color:black;
overflow:hidden;
background-origin:content-box;
background-position:center;
background-size:cover;
height:400px;
}