如何使flexslider图像具有响应性？

Question

目前，我正在使用width：100％使我的图像缩放与窗口大小。

我想知道如何使图像缩小并不会失真。

Answer 1

我只是简单地将图像的宽度更改为width：100％，并将height更改为height：auto，以解决可能需要知道的任何问题。

例如。

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

 }