如何在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