嗨,我有 1200 x 1200 的大背景图像,我想做的是在用户调整浏览器大小时扩展图像,但限制它,使它们永远不会缩放到小于原始大小。
那里有很多可扩展的 bg 图像,但我找不到这样做的,任何帮助将不胜感激。
嗨,我有 1200 x 1200 的大背景图像,我想做的是在用户调整浏览器大小时扩展图像,但限制它,使它们永远不会缩放到小于原始大小。
那里有很多可扩展的 bg 图像,但我找不到这样做的,任何帮助将不胜感激。
background-size: cover;
你去吧
另一种可能性是使用媒体查询。将图像大小设置为 ..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')" ;
如果有人对上述内容有任何附加或修复,请随时贡献。
希望这可以帮助那里的人...
以下 CSS + Javascript + JQuery 组合对我有用。
感谢 ANeves 的上述回答,这很有帮助。
body
{
background: url(background.jpg) center center fixed;
background-size: 100% auto;
}
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')
;
}
});
});
对于背景图像,我通常为 html 标签设置一个最小宽度,该宽度将是图像的原始宽度或更小,这可以防止图像缩小太多。
将图像放入 div 并为其指定大小。将以下属性应用于 img 标签
background-repeat: no-repeat;
background-size: 100% 100%;
您似乎正在寻找 CSS3 的background-size属性。如果您知道图像为 1200x1200,则可以限制容器的最小尺寸。
我不相信它会在 IE 上运行,所以它可能不是你的选择。
在这种情况下,我建议你看看http://www.markschenk.com/cssexp/background/scaledbgimage.html