如何让背景图片在缩放时保持不变？

当有人放大在网页上一样，它会留作为原始图像（最好是在CSS如果这是可以做到）如何让背景图片在缩放时保持不变？

2013-02-14 Mday

我有一个背景图像上身体设置和使用background-size: 100%得到它填补了屏幕。这将完成你正在尝试做的事情。我不确定除了身体之外的任何元素都有好的方法。

2013-02-14 22:53:28

我认为他正在努力保持图像在整个窗口的比例大小......但即使如此，我并不完全确定，特别是因为甚至没有一个完整的句子...... :( – 2013-02-14 23:34:44

同意。我的想到的是，这可能是最好的，可以在CSS中完成。其他任何需要js的。 – 2013-02-15 01:10:14

我会认为这需要JavaScript，因为你需要弄清楚有多大的视口是本身......每当该视口被改变，这是无法检测到的CSS ...这是哪里的JavaScript进来你应该看看javascript/jquery resize浏览器事件。 jQuery通过http://api.jquery.com/resize/的一些例子很好地实现了这个功能，你应该很容易使用它。

他们给出的例子是当窗口被调整大小时添加身体的新宽度......当窗口被放大时，这是相同的触发器。请看jsfiddle。我所做的是先插入新视口的宽度。然后我还重新调整了盒子的宽度和高度，以相对于视口的1/5。

神奇代码：

$(window).resize(function() { 
    $('#log').append('<div>' + $(this).width() + '</div>'); 
});

和什么样的变化宽度：

if (logWidth == width/3) { 
    console.log("hooray."); 
} 
else { 
    console.log("resize the log please."); 
    logWidth = width/3; 
    $('#log').width(logWidth); 
}

这如果else语句可以修改为背景图像的需求。

这给了我可以用来设置背景图像/宽度/无论任何元素，我想要在任何调整大小事件的新宽度。

来源

2013-02-14 23:04:32

还有这个：http://srobbin.com/jquery-plugins/backstretch/ – mMoovs 2013-06-11 13:16:31

@mMoovs你在引用什么链接，一些伴随的文字总是需要的... – 2013-06-13 02:49:40

对不起，我本来应该稍后添加更多，因为我匆忙发布了链接但忘记了它。所以，backstretch.js用给定的图像填充背景并将其保留在位置上当我放大或调整窗口大小时，我相信它可以满足@MyDays需求，尽管它不是用OP做的。 – mMoovs 2013-06-13 10:46:02

试试这个：

background-size: cover;  
background-attachment: fixed;

这个link其他功能。

来源

2013-06-11 13:12:53 user2474655

如何让背景图片在缩放时保持不变？

回答

相关问题