7

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

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

4

6 回答 6

23 
background-size: cover;

你去吧

于 2013-12-29T00:21:01.293 回答
5

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

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

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

希望这可以帮助那里的人...

于 2012-08-21T20:48:26.363 回答
5

以下 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')
            ;
        }
    });
});
于 2011-05-30T14:03:30.707 回答
1

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

于 2013-03-18T13:56:07.857 回答
1

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

background-repeat: no-repeat;
background-size: 100% 100%;
于 2014-03-12T07:00:55.170 回答
0

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

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

于 2010-06-15T11:12:35.220 回答