html - 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 px):

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

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

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