CSS：如果大于窗口，则缩小背景图像，否则保持 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19682557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Scale background image down if larger than window, keep at 100% otherwise
提问by ividyon
I'd like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it's original size (1920x1080). That way, users with smaller resolutions can still see the entire image, but those beyond do not have an ugly upscaled background.
我想在我的网站正文中部署一个背景图像，该图像会随着窗口分辨率而缩小，但不会放大到超过其原始大小 (1920x1080)。这样，分辨率较小的用户仍然可以看到整个图像，但那些分辨率较低的用户没有丑陋的放大背景。
It doesn't look like background images support properties like max-width, which I would usually use for a purpose like that.
看起来背景图像不支持像 max-width 这样的属性，我通常会将其用于此类目的。
What could the solution be? Is this possible in CSS without extra scripting?
解决办法是什么？在没有额外脚本的情况下，这可以在 CSS 中实现吗？
回答by jensborje
I would use a div as a wrapper with a max-width and set the background to that div.
我将使用 div 作为具有最大宽度的包装器并将背景设置为该 div。
HTML
HTML
<body>
<div class="container">Content</div>
</body>
CSS
CSS
.container {
width: 100%;
max-width: 1920px; /* YOUR BG MAX SIZE */
background:url("bg.png") no-repeat;
background-size: 100%;
}
回答by ndugger
Just a really small/quick suggestion:
只是一个非常小的/快速的建议：
Depending on how it looks, and all flows together, background-size:contain;might be an option.
取决于它的外观和所有流动，background-size:contain;可能是一种选择。
or, on your body, set the max width to 1920, set the margins to auto, and that might also work for you.
或者，在您的身体上，将最大宽度设置为 1920，将边距设置为自动，这也可能对您有用。
回答by vadlamani
You can try like this. Any size image resolution will work like responsive:
你可以这样试试。任何尺寸的图像分辨率都可以像响应式一样工作：
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%;
}
回答by SidOfc
You could try creating an html <img>tag with a specific id
您可以尝试创建一个<img>带有特定标签的 html标签id
e.g.
例如
HTML
HTML
<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />
CSS
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.
}
For dynamic centering you would have to use Javascript in combination with a window.onresizeevent.
对于动态居中，您必须将 Javascript 与window.onresize事件结合使用。
If you need more information I will edit my post accordingly.
如果您需要更多信息，我将相应地编辑我的帖子。
A good alternative which is very easy to use(but does stretch your background) would be to use jquery backstretch plugin. It allows you to simply add a fullscreen background image, which will scale with resolution (which is not exactly what you want, but the best alternative I could think of).
一个非常易于使用（但确实会拉伸您的背景）的好方法是使用jquery backstretch plugin。它允许您简单地添加一个全屏背景图像，该图像将随分辨率缩放（这不完全是您想要的，但我能想到的最佳选择）。
