全屏背景圖片調整大小

Question

我正在嘗試將背景圖像設置為全屏，並且在窗口調整大小時，圖像不會更改實際像素大小，但是會變得更小（像crop-like） 。

這就是我的意思：（嘗試調整窗口大小，並注意圖片變小或變大，但沒有像素化） http://jsfiddle.net/G7Qc4/

現在，由於圖像是div的背景，因此上面的方法起作用了，我已經設置了：

background-position: center top;

如果只是普通的<img>它不起作用，我的問題是如何使它起作用？ 是否有辦法解決？

我使用的nivoSlider不接受div的圖像，因此我必須使用<img> 。

非常感謝

Answer 1

據我了解，您想使用實際標簽作為背景而不是背景圖片。

這是我的解決方案： http : //jsfiddle.net/ttZeM/

它需要知道背景圖像的尺寸。

有一個div，它的背景是絕對定位的，網站內容是絕對定位在其頂部的。

為了使背景圖片居中，我將其向左移動了-500px，即寬度的一半。 它位於div的內部，該div的寬度為0px，以position:absolute; left:50%為中心 position:absolute; left:50%是一種奇怪的技術，但是如果您知道圖像的大小，它就會起作用。

另請注意，bg_wrap div已溢出：隱藏； 寬度：100％; 這意味着您不會在屏幕邊緣看到滾動條。

我希望這就是你所追求的！

Answer 2

可以使用CSS3（ background-size: cover ）來完成，就像這樣： http : //jsfiddle.net/mqchen/Kq3pa/