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

回答