flexslider 图像尺寸封面答案

【问题标题】：flexslider image size coverflexslider 图像尺寸封面
【发布时间】：2013-02-18 22:20:54
【问题描述】：

对于我的个人网站http://stevengeorgeharris.com，我创建了一个单页设计，其中多个 div 相互堆叠。 div 是 width: 100% 和 height: 100% 所以它们随浏览器缩放，在每个 div 中我使用 flexslider 创建全屏幻灯片。

我的问题是当浏览器变窄 flexslider 容器中的图像缩小时，会在下面留下空白。

这是 flexslider 图片的 CSS。

.flexslider .slides img {width: 100%; height:auto; display: block;}

【问题讨论】：

【解决方案1】：

为此，您应该使用媒体查询。您可以在此处阅读有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/CSS/Media_queries

我做了你想做的事；再配一张图，你可以在这里看到最终结果：http://jsbin.com/olakit/2

代码如下（原图为1024 x 683 px）：

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

@media (min-width: 2000px) {
  img{
    height: auto;
  }
}

注意“最小宽度”应该大于图片的宽度。

【讨论】：