如何停止图像缩小时，页面在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

回答