你如何使 flexslider 图像响应？答案

【问题标题】：How do you make flexslider images responsive?你如何使 flexslider 图像响应？
【发布时间】：2013-10-25 09:57:16
【问题描述】：

目前，我使用 width: 100% 使我的图像随窗口大小缩放。

我想知道如何使图像按比例缩小而不失真。

【问题讨论】：

标签： image responsive-design slider scale flexslider

【解决方案1】：

我只是将图像宽度更改为 width: 100% 并将高度更改为 height:auto 以便为可能需要知道的任何人解决此问题。

例如。

img {
    width: 100%;
    height:auto;
}

编辑：

为了确保图像宽度不会大于其容器

img {
    max-width: 100%;
    width: 100%;
    height:auto;
}

【讨论】：

【解决方案2】：

我这样做了，它对我有用。我不想要主页上的大滑块，所以我调整了它的大小，然后我发现它不再响应了。我添加了一些代码并对其进行了测试，有些不起作用，有些起作用。最后，这是调整滑块大小并保持响应的代码！

.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { 
 display: block;
 max-width: 100%; height: auto; margin: - auto;
}

 }

【讨论】：

很高兴它有帮助。小心你的代码，你没有在你的边距上声明值类型并且有一个额外的右括号； .flexslider {最大宽度：700px;边距：-20px； padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* 在加载 JS 之前隐藏幻灯片。避免图像跳跃 */ .flexslider .slides img { display: block;最大宽度：100%；高度：自动；边距：0 自动； }