logo标签列表

扩展背景和最小尺寸

cssbackground-imagescaleresize
7

您好，我有一些大小为1200x1200的大型背景图片，希望在用户调整浏览器大小时能够自动扩展图片，但同时限制图片不会缩小到原始尺寸以下。

虽然有很多可伸缩的背景图片，但我找不到符合要求的。感谢您的帮助。

6个回答
23
background-size: cover;

这就是你想要的

1
太简单了！非常感谢。 - m0g
1
OP要求一种解决方案，其中背景图像“永远不会缩小到原始大小以下”。 'cover'是否只能从100％开始放大而不是缩小到填满整个屏幕的最小高度/宽度？ - mattsoave
@mattsoave：使用background-attachment: fixed;会裁剪。 - Júda Ronén
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')
            ;
        }
    });
});
5

另一种可能是使用媒体查询。将图像大小设置为1280x450，然后对于所有宽度大于1280px的窗口大小，使用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')" ;

如果有人对上述内容有任何附加组件或修复方法，请随意贡献。希望这能帮助到某个人...
1
将图像放置在div中，并为其指定大小。 应用以下属性到img标签。
background-repeat: no-repeat;
background-size: 100% 100%;
1

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

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接