CSS 缩放背景和最小尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3044428/
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
scaling background and min size
提问by ross Hulford
Hi I have big background images 1200 by 1200, what i would like to do is expand the images when the user resizes the browser but constrain it so they never scale any smaller than the original size.
嗨，我有 1200 x 1200 的大背景图像，我想做的是在用户调整浏览器大小时扩展图像但对其进行限制，因此它们的缩放比例永远不会小于原始尺寸。
There all lots of scalable bg images out there but none I can find that do this, any help would be appreciated.
那里有很多可扩展的 bg 图像，但我找不到可以这样做的，任何帮助将不胜感激。
回答by dsynkd
background-size: cover;
there you go
你去吧
回答by Mir4cle
The following CSS + Javascript + JQuery combination has worked for me.
以下 CSS + Javascript + JQuery 组合对我有用。
Thanks to ANeves for the above answer which was helpful.
感谢 ANeves 的上述回答，这很有帮助。
CSS:
CSS：
body
{
background: url(background.jpg) center center fixed;
background-size: 100% auto;
}
Javascript (JQuery):
Javascript（JQuery）：
jQuery (function ($)
{ // ready
$(window).resize (function (event)
{
var minwidth = 1200;
var minheight = 1024;
var bodye = $('body');
var bodywidth = bodye.width ();
if (bodywidth < minwidth)
{ // maintain minimum size
bodye
.css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
;
}
else
{ // expand
bodye
.css ('backgroundSize', '100% auto')
;
}
});
});
回答by Olly
another possibility would be to use media queries. set the image size to be say..1280x450 and then use a media query of background-size:100% auto;for all window sizes over 1280px wide.
另一种可能性是使用媒体查询。将图像大小设置为 ..1280x450，然后使用background-size:100% auto的媒体查询；适用于宽度超过 1280 像素的所有窗口大小。
there is some code which also handles image resizing with IE, however ive admittedly had limited success with it...
有一些代码也可以使用 IE 处理图像大小调整，但是我承认我的成功有限......
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;
if anybody has any add ons or fixes for the above then feel free to contribute.
如果有人对上述内容有任何添加或修复，请随时做出贡献。
hope this helps someone out there...
希望这可以帮助那里的人......
回答by miles_holt
For background images, I usually set a minimum width for the html tag which would be the original width of the image or less, this stops the image from shrinking too far.
对于背景图像，我通常为 html 标签设置一个最小宽度，即图像的原始宽度或更小，这会阻止图像缩小得太远。
回答by miles_holt
Put image in div and give size to it. Apply following property to img tag
将图像放在 div 中并为其指定大小。将以下属性应用于 img 标签
background-repeat: no-repeat;
background-size: 100% 100%;
回答by ANeves
You seem to be looking for CSS3's background-sizeproperty. You can constraint the minimum size to the container, if you know that the images are 1200x1200.
您似乎在寻找 CSS3 的background-size属性。如果您知道图像为 1200x1200，则可以将最小尺寸限制为容器。
I don't believe it'll work on IE though, so it might not be an option for you.
In that case, I suggest you take a peek at http://www.markschenk.com/cssexp/background/scaledbgimage.html
我不相信它会在 IE 上工作，所以它可能不是你的选择。
在这种情况下，我建议您查看http://www.markschenk.com/cssexp/background/scaledbgimage.html
