html – 如何在CSS中水平调整页面时停止图像收缩

我有一个1920×100的图像插入我的页面顶部：

<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属性来实现这一点,还是我完全错误的实现这个方法？

任何帮助赞赏.

解决方法

使用CSS

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