Question

就像有人放大网页一样，它会保留原始图像（如果可以的话，最好是CSS）

Answer 1

我在身体上设置了背景图像，并使用background-size: 100%让它填满屏幕。这将完成你想要做的事情。我不确定身体以外的任何元素都会有一个好的方法。

Answer 2

我认为这需要javascript，因为你需要弄清楚视口本身的大小...每当视口被更改时，css无法检测到......这就是javascript的来源。你应该看看在javascript / jquery调整大小浏览器事件。 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);
}

可以根据您的背景图片需要修改此if else语句。

这给了我一个新的宽度，我可以使用它来设置背景图像/宽度/任何我希望在任何调整大小事件上的任何元素。

Answer 3

试试这个：

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

此link上的其他功能。

如何在缩放时使背景图像保持不变？

3 个答案: