如何停止圖像縮小時，頁面在CSS

水平調整我有插在我的網頁頂部的1920x100圖像：如何停止圖像縮小時，頁面在CSS

<img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top">

我想擁有它，這樣當頁面水平調整大小，圖像不與頁面縮小，而是保留在屏幕的中央，像這樣：

enter image description here

看起來可能很容易地實現一個簡單的事情，但我避風港沒有找到解決辦法。

我可以把圖像放在一個div中，並將div的左邊位置設置爲 - （1920-pageWidth）/ 2，但是這依賴於JavaScript。我正在尋找一個更乾淨的解決方案（如果有的話），以最大限度地減少頁面的複雜性，並最大限度地提高瀏覽器的兼容性。

是否有任何CSS屬性可以用來實現這一目標，或者我是否完全錯誤地實現這個目標？

任何幫助表示讚賞。

使用CSS

div { 
    background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent; 
    height: 100px; 
}

2012-05-18 15:19:57 HerrSerker

完美的作品，謝謝。 –

可以將此CSS屬性添加到您的形象：min-width: 1280px

2012-05-18 15:12:14 gabitzish

這將允許圖像縮小到1280像素，但我相信他希望圖像保持1920px，但保持居中在頁面邊緣溢出溢出的頁面。 –

這幫了我，我有寬度/高度設置，但圖像仍然重新調整，謝謝 – workabyte

而不是使用img元素使用相同的圖像作爲背景圖像和位置到中心。它將始終居中，但當元素小於圖像時可能會被裁剪。如果元素變大，您還應該將background-repeat設置爲不重複。

div { 
    background: url(/to/img) no-repeat 50% 0; 
    margin: 0 auto; 
}

2012-05-18 15:19:56 Litek

什麼這樣的事情。（使用一半的margin-left圖像寬度）

HTML：

<div id='wrapper'> 
    <img src='./Resources/Images/banner.jpeg' id='banner'> 
</div>

CSS：

#wrapper{overflow:hidden;position:relative;} 
#banner{position:absolute;top:0;left:50%;margin-left:-960px;}

這裏有一個小提琴使用DIV證明它（改變#wrapper寬度）： http://jsfiddle.net/mestekweb/mDkrE/

2012-05-18 15:20:04

另一種選擇是將圖像用作背景，正如其他人所提及的。 –

只需使用圖像作爲background-image並使用background-position 值將其放置在元素的中心頂部。

看到這個jsFiddle。

2012-05-18 15:29:53 GodLesZ

這也很棒。 ^^ – fungusanthrax

回答