CSS：如果大于窗口，则缩小背景图像，否则保持 100%答案

【问题标题】：CSS: Scale background image down if larger than window, keep at 100% otherwiseCSS：如果大于窗口，则缩小背景图像，否则保持 100%
【发布时间】：2013-11-10 01:04:09
【问题描述】：

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

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

解决办法是什么？在没有额外脚本的情况下，这在 CSS 中是否可行？

【问题讨论】：

你可能需要一些 jquery/javascript

标签： css image background background-image

【解决方案1】：

我会使用 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%;
}

【讨论】：

【解决方案2】：

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

根据它的外观和所有流程，background-size:contain; 可能是一个选项。

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

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案4】：

您可以尝试使用特定的 id 创建一个 html <img> 标记

例如

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

【讨论】：