缩放背景和最小尺寸答案

【问题标题】：scaling background and min size缩放背景和最小尺寸
【发布时间】：2010-06-15 10:49:18
【问题描述】：

您好，我有 1200 x 1200 的大背景图片，我想做的是在用户调整浏览器大小时扩展图片，但要限制它，使其永远不会缩放到小于原始大小。

那里有很多可扩展的 bg 图像，但我找不到这样做的，任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

background-size: cover;

你来了

【讨论】：

如此简单！非常感谢。
OP 要求提供一种解决方案，其中背景图像“永远不会缩放到小于原始大小”。 'cover' 不会放大或缩小到填充整个屏幕的最小高度/宽度，而不是仅从 100% 放大吗？
@mattsoave：有了background-attachment: fixed;，它就可以收割了。

【解决方案2】：

以下 CSS + Javascript + JQuery 组合对我有用。

感谢 ANeves 的上述回答，这很有帮助。

CSS：

body
{
    background: url(background.jpg) center center fixed;
    background-size: 100% auto;
}

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')
            ;
        }
    });
});

【讨论】：

【解决方案3】：

另一种可能性是使用媒体查询。将图像大小设置为 ..1280x450，然后对宽度超过 1280 像素的所有窗口大小使用 background-size:100% auto; 的媒体查询。

有一些代码也可以使用 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')" ;

如果有人对上述内容有任何附加或修复，请随时贡献。

希望这对那里的人有所帮助...

【讨论】：

【解决方案4】：

对于背景图片，我通常会为 html 标签设置一个最小宽度，该宽度将是图片的原始宽度或更小，这样可以防止图片缩小太多。

【讨论】：

【解决方案5】：

将图像放入 div 并为其指定大小。将以下属性应用于 img 标签

background-repeat: no-repeat;
background-size: 100% 100%;

【讨论】：

【解决方案6】：

您似乎在寻找 CSS3 的 background-size 属性。如果您知道图像为 1200x1200，则可以限制容器的最小尺寸。

我不相信它会在 IE 上运行，所以它可能不适合你。
在这种情况下，我建议你看看http://www.markschenk.com/cssexp/background/scaledbgimage.html

【讨论】：