flexslider图像大小覆盖

对于我的个人网站http://stevengeorgeharris.com我创建了一个单页设计与几个div堆叠在一起。该div是宽度：100％和高度：100％，所以他们与浏览器的规模，在每个div我使用flexslider创建一个全屏幕幻灯片。flexslider图像大小覆盖

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

这是flexslider图像的CSS。

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

我注意到你已经将HTML的高度设置为100％。这不起作用。你必须设定一个固定的高度。百分比高度根本不起作用，除非至少有一位父母拥有固定身高。 – Calvin 2013-02-19 00:37:55

为此，您应该使用媒体查询。您可以在这里阅读关于媒体查询的更多信息：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; 
    } 
}

注意到，“最小宽度”应该更比图片的宽度。

2013-02-19 00:45:00 Sahar

回答