如何在CSS中水平调整页面大小时停止图像缩小

Question

我有一张1920x100的图片，它插在我页面的顶部：

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

我希望这样，当页面水平调整大小时，图像不会随页面缩小，而是保留在屏幕的中心，如下所示：

这似乎很容易实现，但我还没有找到解决方案。

我可以将图像放在div中，并将div的左侧位置设置为 - （1920-pageWidth）/ 2，但这将依赖于JavaScript。我正在寻找一个更清洁的解决方案（如果有的话），只是为了最大限度地减少页面的复杂性，并最大限度地提高浏览器兼容性。

我是否可以使用任何CSS属性来实现这一目标，或者我是否采用了完全错误的方法来实现这一目标？

任何帮助表示感谢。

Answer 1

使用CSS

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

Answer 2

您可以将此css属性添加到您的图片中：min-width: 1280px

Answer 3

这样的事情怎么样？ （使用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/

Answer 4

只需将图片用作background-image，然后使用background-position center 0值将其放置在元素的中心顶部。

请参阅此jsFiddle。

Answer 5

不使用img元素，而是使用与背景图像相同的图像，并将其定位到中心。它将始终居中，但当元素小于图像时可能会被剪裁。如果元素变大，你还应该将background-repeat设置为no-repeat。

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