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

标签 javascript jquery html css resize

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

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

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

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

任何帮助都会很棒..

最佳答案

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

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

关于Javascript注入(inject)覆盖响应式 slider 的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30628476/

相关文章:

html - Flexbox适合 child 的宽度

javascript - 无法在按键时获取动态添加的文本区域值

javascript - 如何让 javascript 鼠标悬停以突出显示 svg 文件中的其他元素(上下文更改)

javascript - 在 Cypress 中创建随机字符串并将其传递给 cy 命令

javascript - 在某些情况下替换字符串会失败

jquery - 获取jquery中元素的第n个子编号

Android html5 输入类型 ="password"和数字键盘

html - Center Fontastic 字体,哪些是 A 标签?

javascript - 网页上动态更新表格的最简单实现(java/css)

javascript - jQuery - 更改输入值