在瀏覽器中調整div的寬度和高度用CSS調整大小

我有一個大的div包含圖像。我希望該圖像根據瀏覽器窗口的高度/寬度縮小或擴大。我可以通過使用width: 100%來實現這個水平，但如果我將高度設置爲100％，圖像div就會完全消失。在瀏覽器中調整div的寬度和高度用CSS調整大小

我意識到你必須設置BODY和HTML有100％的高度和寬度，我已經做到這一點無濟於事。

如果我給它一個硬編碼的像素高度，圖像顯示正常，但是如果瀏覽器變小，我希望這會縮小。

有人會知道實現這個的正確方法，最好只用CSS？

我的代碼是：

HTML, BODY { 
    width: 100%; 
    height: 100%; 
} 

#imagecontainer { 
    width: 100%; 
    height: 100%; 
    background-image: url(image.jpg); 
    background-size: 100% auto; 
    background-position: center; 
}

來源

2013-10-23 MeltingDog

做工精細這裏.. http://jsfiddle.net/N3MaJ/ –

也許這樣的事情？ http://jsfiddle.net/dangoodspeed/N3MaJ/1/不知道我理解的問題100％，但我認爲你可能希望該行

background-size: cover;

來源

2013-10-23 01:04:44

是啊，那工作。我也有一個#wrapper，我也應該設置爲100％x 100％ – MeltingDog

在瀏覽器中調整div的寬度和高度用CSS調整大小

回答

相關問題