CSS 有没有办法为背景图像使用最大宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6300749/
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
Is there a way to use max-width and height for a background image?
提问by technopeasant
That simple.
就那么简单。
Moving my layout into a fluid territory, working on scalable images. Using the img tag and setting max-width to 100% works perfectly, but i'd rather use a div with the image set as its background.
将我的布局移动到一个流动的区域，处理可缩放的图像。使用 img 标签并将 max-width 设置为 100% 效果很好，但我宁愿使用将图像设置为背景的 div。
The issue I'm running into is that the image doesn't scale to the size of the div it's in the background of. Any way to add markup to the background code to set it to 100% width of it's container?
我遇到的问题是图像没有缩放到它在背景中的 div 的大小。有什么方法可以向后台代码添加标记以将其设置为容器的 100% 宽度？
#one {
background: url('../img/blahblah.jpg') no-repeat;
max-width: 100%;
}
采纳答案by thirtydot
You can do this with background-size:
你可以这样做background-size：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
There are a lot of values other than coverthat you can set background-sizeto, see which one works for you: https://developer.mozilla.org/en/CSS/background-size
除了cover您可以设置的值之外，还有很多值background-size，看看哪个适合您：https: //developer.mozilla.org/en/CSS/background-size
Spec: https://www.w3.org/TR/css-backgrounds-3/#the-background-size
规格：https: //www.w3.org/TR/css-backgrounds-3/#the-background-size
It works in all modern browsers: http://caniuse.com/#feat=background-img-opts
它适用于所有现代浏览器：http: //caniuse.com/#feat=background-img-opts
回答by Dan
As thirtydot said, you can use the CSS3 background-sizesyntax:
正如三十多点所说，您可以使用 CSS3background-size语法：
For example:
例如：
-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;
However, as also stated by thirtydot, this does not work in IE6, 7 and 8.
但是，正如三十点所说，这在 IE6、7 和 8 中不起作用。
See the following links for more information about background-size:
http://www.w3.org/TR/css3-background/#the-background-size
有关更多信息，请参阅以下链接background-size：http:
//www.w3.org/TR/css3-background/#the-background-size
回答by Philll_t
It looks like you're trying to scale the background image? There's a great article in the reference bellow where you can use css3 to achieve this.
看起来您正在尝试缩放背景图像？在下面的参考资料中有一篇很棒的文章，您可以在其中使用 css3 来实现这一点。
And if I miss-read the question then I humbly accept the votes down. (Still good to know though)
如果我错过了这个问题，那么我谦虚地接受投票。（不过还是很高兴知道）
Please consider the following code:
请考虑以下代码：
#some_div_or_body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will work on all major browsers, of course it doesn't come easy on IE. There are some workarounds however such as using Microsoft's filters:
这将适用于所有主要浏览器，当然在 IE 上并不容易。但是有一些解决方法，例如使用 Microsoft 的过滤器：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
There are some alternatives that can be used with a little bit peace of mind by using jQuery:
通过使用 jQuery，有一些替代方案可以让您安心使用：
HTML
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
jQuery:
jQuery：
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
I hope this helps!
我希望这有帮助！
Src: Perfect Full Page Background Image
src：完美的整页背景图片
回答by Hejar
Unfortunately there's no min(or max)-background-size in CSS you can only use
background-size. However if you are seeking a responsive background image you can use Vminand Vmaxunits for the background-sizeproperty to achieve something similar.
不幸的是，CSS 中没有 min（或max）-background-size，您只能使用
background-size. 但是，如果你正在寻找一个负责任的背景图片，你可以使用Vmin和Vmax单位的background-size性质来实现类似的东西。
example:
例子：
#one {
background:url('../img/blahblah.jpg') no-repeat;
background-size:10vmin 100%;
}
that will set the height to 10% of the whichever smaller viewport you have whether vertical or horizontal, and will set the width to 100%.
这会将高度设置为您拥有的垂直或水平视口的 10%，并将宽度设置为 100%。
Read more about css units here: https://www.w3schools.com/cssref/css_units.asp
在此处阅读有关 css 单位的更多信息：https: //www.w3schools.com/cssref/css_units.asp
