CSS：如果大于窗口，则缩小背景图像，否则保持 100%
Posted
技术标签:
【中文标题】CSS：如果大于窗口，则缩小背景图像，否则保持 100%【英文标题】：CSS: Scale background image down if larger than window, keep at 100% otherwise 【发布时间】：2013-11-10 01:04:09 【问题描述】：我想在我的网站正文中部署一个背景图片，该图片会随着窗口分辨率缩小，但不会放大到超过其原始尺寸 (1920x1080)。这样一来，分辨率较小的用户仍然可以看到整个图像，但超出分辨率的用户不会有难看的放大背景。
它看起来不像背景图像支持像 max-width 这样的属性，我通常会将其用于这样的目的。
解决办法是什么？在没有额外脚本的情况下，这在 CSS 中是否可行？
【问题讨论】：
你可能需要一些 jquery/javascript 【参考方案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" />
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 是一个非常容易使用（但会拉伸背景）的好选择。它允许您简单地添加一个全屏背景图像，该图像将随分辨率缩放（这不是您想要的，但我能想到的最佳选择）。
【讨论】：
以上是关于CSS：如果大于窗口，则缩小背景图像，否则保持 100%的主要内容，如果未能解决你的问题，请参考以下文章