Question

我对Chrome浏览器报告的<html>的大小感到困惑。我使用屏幕分辨率为1360x768的全屏工作。我用这个css将全屏图像放在背景上：

bg-img { position:absolute; top:0; left:0; width:1360px; height:768px; }

不幸的是，这不会在全屏显示图像，而且更小。我在<html>标记上查看检查元素，并看到大小如1790 x 768. Chrome报告的计算尺寸：

display: block;
height: 768px;
width: 1790.6666259765625px;

我发现这可以在--chrome-frame模式下正常工作（宽度：1360px，但扩展程序有另一个问题，因此无法使用）

发生了什么事？

使用%的解决方案即使对背景图片工作正常，也无法解决我的问题，因为我在此背景上有其他absolute元素而我无法使用{{1}定位它们因为它不够精确。

我虽然可能报道1790.6666259765625px是由我的扩展桌面和2'nd监视器引起的，但在禁用同样的问题之后。

Answer 1

<强>代替

bg-img { position:absolute; top:0; left:0; width:1360px; height:768px; }

尝试执行此操作：

bg-img { position:absolute; top:0; left:0; width:100%; height:100%; }

它总是适用于我，并将在不同的监视器中工作。祝你好运！

Answer 2

你想要CSS3 background-size，它允许你调整图像比例，无论屏幕分辨率如何。确保您匹配CSS选择器并将URL调整为您正在使用的图像...

.bg-img
{
 background-image: url(wallpaper.jpg);
 background-size: 100% auto;
}

对于现场演示，首先在我的网站上挑选壁纸......

...然后在这里更改“壁纸效果”...

一旦应用，您将在themes/style_user.css找到相关的CSS代码。