html - 在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 属性可以用来实现这一点，或者我是否采用了完全错误的方式来实现这一点？

任何帮助表示赞赏。

score 8 · Accepted Answer

8

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

于 2012-05-18T15:12:14.403 回答

score 6 · Accepted Answer

使用 CSS

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

score 2 · Accepted Answer

只需将图像用作 abackground-image并使用该background-position center 0值将其放置在元素的中心顶部。

看到这个jsFiddle。

score 1 · Accepted Answer

这样的事情怎么办。（使用图像宽度的一半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/

score 0 · Accepted Answer

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

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

5 回答 5