8

我想在我的网站正文中部署一个背景图像，该图像会随着窗口分辨率缩小，但不会放大到超过其原始尺寸 (1920x1080)。这样，具有较小分辨率的用户仍然可以看到整个图像，但那些超出的用户没有难看的放大背景。

它看起来不像背景图像支持像 max-width 这样的属性，我通常会使用它来达到这样的目的。

解决方案是什么？这在没有额外脚本的情况下可以在 CSS 中实现吗？

4

4 回答 4

11

我将使用 div 作为具有最大宽度的包装器并将背景设置为该 div。

HTML

<body>
 <div class="container">Content</div>
</body>

CSS 

.container {
  width: 100%;
  max-width: 1920px; /* YOUR BG MAX SIZE */
  background:url("bg.png") no-repeat;
  background-size: 100%;
}
于 2013-10-30T13:29:50.313 回答
4

只是一个非常小的/快速的建议：

取决于它的外观，以及所有流动在一起，background-size:contain;可能是一种选择。

或者，在您的身体上，将最大宽度设置为 1920，将边距设置为自动，这也可能对您有用。

于 2013-10-30T13:36:04.380 回答
3

你可以这样试试。任何尺寸的图像分辨率都可以像响应式一样工作：

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
    background-size:100% 100%;
}
于 2013-10-30T12:53:23.643 回答
2

您可以尝试<img>使用特定的id

例如

HTML

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

CSS

img#mybg {
    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    max-width: 1920px; //set max width
    max-height: 1080px; //set max height
    z-index: -999999; //set z-index so it won't overlap any other element.
}

对于动态居中，您必须将 Javascript 与window.onresize事件结合使用。

如果您需要更多信息，我将相应地编辑我的帖子。

一个非常易于使用（但会拉伸背景）的好选择是使用jquery backstretch plugin。它允许您简单地添加一个全屏背景图像，该图像将随分辨率缩放（这不是您想要的，但我能想到的最佳选择）。

于 2013-10-30T12:47:44.640 回答