为什么滑块图像唯一没有响应？答案

【问题标题】：Why the slider image the only thing that's not responsive?为什么滑块图像唯一没有响应？
【发布时间】：2013-02-08 21:18:02
【问题描述】：

我正在使用 woothemes 的 flexslider，但无法弄清楚为什么在调整浏览器大小/在 ipad/iphone 上查看网站时，图像总是比内容宽得多。

我在滑块、幻灯片或图像上看不到任何可能导致图像无法调整大小的样式。实际图像本身没有设置高度或宽度属性。此外，滑块中只有一张图像。

内容的容器似乎也在调整大小，图像/幻灯片宽度设置为 100%，但仍溢出到右侧，导致出现水平滚动。

编辑：图像现在调整大小，但仍有一个水平滚动条，右侧有一个巨大的空白区域。我认为是图像造成了这种情况，但似乎并非如此。

【问题讨论】：

【解决方案1】：

将width: 100% 添加到.flexslider .slides img css 声明中，如下所示（flexslider.css 的第 21 行）：

.flexslider .slides img {margin: 0 auto; display: block; width: 100%;}

【讨论】：

哇，不错！我为什么不早点想到这个。右手边还有很大的空间。如果不是图像，这是什么原因？？
另外，skeleton.css 的第 25 行将#footer .container 的宽度设置为 960 像素，使其突出在右侧。我用来识别此类问题的一个技巧是添加div {border:1px solid #000 !important;}。
@showdev 啊啊啊好棒！！！不知道我到底是怎么弄不明白的，但是感谢您的帮助:)

【解决方案2】：

将max-width: 100% 添加到img 即可正常工作。

【讨论】：

【解决方案3】：

#footer .container {
    width: 960px;
}

你需要让这个盒子灵活...比如'width:100%';

继续

【讨论】：