javascript - 如何使我的图片库宽度响应下面的 div？

Question

我有一个名为 slider1_container 的图片库，它的样式属性在 HTML 代码中指定，例如:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
    height: 600px; background: #191919; overflow: hidden;">

除了 slider 比下面的 div 框宽之外，这非常有效。这个 div 框是父类“rightcolumn”宽度的 100%，我的 slider1_container div 也在这个类中，但是因为它的宽度 700px 是在 HTML 代码中设置的，所以它没有在其他视口(viewport)尺寸下似乎没有响应。

我尝试在不同点使用媒体查询将 slider1_container 的宽度更改为小于 700 像素的宽度，但 HTML 代码中指定的宽度似乎会否决它。

[死链接已删除，请更新]

如果我将 700px 设置为自动，宽度可以完美工作，但当您加载页面时图片库只显示黑色，直到您选择另一张照片它会很快出现(听起来是 javascript 问题)。

如果您在我的网站上调整视口(viewport)的大小，您会看到图片库的宽度与其下方的 div 框不匹配如何使它像其他 div 一样响应？

谢谢!!

Answer 1

阅读您正在使用的任何幻灯片插件的文档。它很可能具有响应性设置。如果没有，您可以找到一百万种不同的响应式幻灯片插件 here