image - 你如何使 flexslider 图像响应？

Question

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

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

Answer 1

我只是将图像宽度更改为 width: 100% 并将高度更改为 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;
}

 }