为啥滑块图像唯一没有响应？
Posted
技术标签:
【中文标题】为啥滑块图像唯一没有响应？【英文标题】：Why the slider image the only thing that's not responsive?为什么滑块图像唯一没有响应？ 【发布时间】：2013-02-08 21:18:02 【问题描述】：我正在使用 woothemes 的 flexslider，但无法弄清楚为什么在调整浏览器大小/在 ipad/iphone 上查看网站时，图像总是比内容宽得多。
我在滑块、幻灯片或图像上看不到任何可能导致图像无法调整大小的样式。实际图像本身没有设置高度或宽度属性。此外，滑块中只有一张图像。
内容的容器似乎也在调整大小，图像/幻灯片宽度设置为 100%，但仍溢出到右侧，导致出现水平滚动。
网站：http://whitakerbespoke.com/
编辑：图像现在调整大小，但仍有一个水平滚动条，右侧有一个巨大的空白区域。我认为是图像造成了这种情况，但似乎并非如此。
【问题讨论】：
【参考方案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】：简单： http://whitakerbespoke.com/wp-content/themes/spacing/css/skeleton-responsive.css?ver=3.5.1 第 28 行
#footer .container
width: 960px;
你需要让这个盒子灵活...比如'width:100%';
继续
【讨论】：
以上是关于为啥滑块图像唯一没有响应？的主要内容，如果未能解决你的问题，请参考以下文章