Javascript注入(inject)覆盖响应式 slider 的CSS

Question

我正在使用 Malsup 的 Cycle Slider，但在注入(inject)内联 CSS 样式时遇到了一些问题。

如果您导航到 http://cirrusfitness.com你会看到我有 slider 工作和功能。

当您调整浏览器的大小以测试响应能力时，问题就会出现。它出现在 980px 断点之后，图像似乎不成比例地缩小到容器。留下一个小图像和一个大的空白区域。

我尝试过使用 CSS background-size: cover 以及对 .item 类应用固定的 h/w 比率，但没有成功。

任何帮助都会很棒..

Answer 1

只有当您主动使用鼠标调整浏览器窗口大小时，这似乎才是问题。这个插件似乎在加载时在 #hompage-slider_content 上放置了一个静态高度的内联样式。当您将浏览器窗口缩小到超过 980 像素标记然后重新加载页面时，您会注意到您将不再有那么大的空白区域，因为插件会在加载时计算正确的高度。

要解决此问题，您可能必须将事件附加到窗口调整大小事件，并使用新的行内高度更新 #hompage-slider_content。