你如何使flexslider图像响应？

Question

目前，我使用宽度：100％来使我的图像缩放窗口大小。

我想知道如何使图像缩小而不会变形。

Answer 1

我只是将图像宽度更改为宽度：100％并将高度更改为高度：自动修复此问题以供任何可能需要了解的人使用。

例如

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

编辑：

确保图像宽度不会超过其容器

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

Answer 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;
}

 }