如果圖像大於div，則強制佔據div

我想顯示所有圖像（bacground圖像比div大2000x168）。我設置寬度100％，但它似乎沒有顯示整幅圖像，它是隻顯示我的屏幕大小

我如何可以顯示完整的圖像，不僅如此，我能夠在我的屏幕上看到的部分？

這裏是一個fiddle

#bottomnav{ 
    width:100%; 
    height:50px; 
    background: no-repeat url(http://eurekavi.com/barraroja.png) /*repeat 0 0*/; 
    position:absolute; 
    bottom:0px; 

}

圖像看起來應該像 this

來源

2013-04-02 cMinor

看一看CSS3的背景-size屬性。 –

[Stretch and scale a CSS image in the background - with CSS only]可能的重複（http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-與-CSS-只） – isherwood

取決於你想要什麼：

#bottomnav{ 
    width:600px; 
    height:50px; 
    background:#F00; 
    position:absolute; 
    bottom:0px; 
    background: no-repeat url(http://eurekavi.com/barraroja.png) top center; 
    background-size: contain; 
}

可以居中背景，以避免對左，右不平衡的黑色區域。

參考：http://www.css3.info/preview/background-size/

來源

2013-04-02 16:18:04

這裏，試試這個：

#bottomnav 
    { 
    width:100%; 
    height:50px; 
    background: no-repeat url(http://eurekavi.com/barraroja.png); 
    background-size:100% 100%; 
    }

希望它能幫助！

來源

2013-04-02 16:13:41

您可以在CSS3中使用background-size屬性。

#bottomnav{ 
    width:100%; 
    height:50px; 
    background:url(http://yoururl.com/image.png) no-repeat; 
    background-size:100% auto; 
}

這將工作，但只適用於支持CSS3的瀏覽器。在此示例中，圖像的高度根據分辨率自動調整。如果你想保持它的預定大小，你應該嘗試這樣的事情。

background-size:width height;

在這個設置你的寬度在％或px或者你可以使用100％爲上面提到的帖子。它會工作。你也可以使用這個參數 background-position：center; 這將使圖像居中。

來源

2013-04-02 16:17:58

如果圖像大於div，則強制佔據div

回答

相關問題