Javascript 响应滑块的注入覆盖 CSS
Javascript injection overriding CSS for responsive slider
我正在使用 Malsup 的 Cycle Slider，我在注入内联 CSS 样式时遇到了一些问题。
如果您导航到 http://cirrusfitness.com，您会看到我的滑块正常工作并且功能正常。
当您调整浏览器的大小以测试响应能力时，问题就出现了。它出现在 980px 断点之后，图像似乎不成比例地缩小到容器。留下小图和大白space.
我曾尝试使用 CSS background-size: cover 以及对 .item class 应用固定的 h/w 比率，但没有成功。
任何帮助都会很棒..
这似乎只有在您使用鼠标主动调整浏览器大小时 window 时才会出现问题。这个插件在加载时似乎在 #hompage-slider_content 上放置了一个带有静态高度的内联样式。当您将浏览器 window 缩小超过 980px 标记然后重新加载页面时，您会发现您不会再有那么大的白色 space 因为插件会在加载时计算正确的高度。
要解决此问题，您可能必须将事件附加到 window 调整大小事件，并使用新的行内高度更新 #hompage-slider_content。
使用#hompage-slider_content.item{ background-size: cover !important; } 我能够填充宽高比，但这导致一些图像溢出。
为了解决这个问题，我使用了 background-size: 100% 100% 来填充高度和宽度。这会扭曲图像，但比大面积的白色更好 space。
我正在使用 Malsup 的 Cycle Slider，我在注入内联 CSS 样式时遇到了一些问题。
如果您导航到 http://cirrusfitness.com，您会看到我的滑块正常工作并且功能正常。
当您调整浏览器的大小以测试响应能力时，问题就出现了。它出现在 980px 断点之后，图像似乎不成比例地缩小到容器。留下小图和大白space.
我曾尝试使用 CSS background-size: cover 以及对 .item class 应用固定的 h/w 比率，但没有成功。
任何帮助都会很棒..
这似乎只有在您使用鼠标主动调整浏览器大小时 window 时才会出现问题。这个插件在加载时似乎在 #hompage-slider_content 上放置了一个带有静态高度的内联样式。当您将浏览器 window 缩小超过 980px 标记然后重新加载页面时，您会发现您不会再有那么大的白色 space 因为插件会在加载时计算正确的高度。
要解决此问题，您可能必须将事件附加到 window 调整大小事件，并使用新的行内高度更新 #hompage-slider_content。
使用#hompage-slider_content.item{ background-size: cover !important; } 我能够填充宽高比，但这导致一些图像溢出。
为了解决这个问题，我使用了 background-size: 100% 100% 来填充高度和宽度。这会扭曲图像，但比大面积的白色更好 space。