flexslider图像大小封面

Question

对于我的个人网站http://stevengeorgeharris.com，我创建了一个单页设计，其中几个div叠放在一起。 div是宽度：100％和高度：100％因此它们随浏览器缩放，在每个div中我使用flexslider来创建全屏幻灯片。

我的问题是当浏览器变得更窄时，flexslider容器内的图像缩小，留下下方的空白。

这是flexslider图像的CSS。

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

无论如何都要使图像像http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

一样

Answer 1

为此，您应该使用媒体查询。您可以在此处详细了解媒体查询：https://developer.mozilla.org/en-US/docs/CSS/Media_queries

我做了你想做的事;使用另一张图片，您可以在此处查看最终结果：http://jsbin.com/olakit/2

这是代码（原始图片是1024 x 683像素）：

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

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

请注意，“min-width”应该大于图片的宽度。