javascript - HTML 大小 - 计算大小？

Question

<html>我对Chrome 浏览器报告的大小感到困惑。我正在以屏幕分辨率全屏工作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在这个背景上有其他元素并且我不能用来定位它们%，因为它不够精确。

我虽然可能报告 1790.6666259765625px 是由我的扩展桌面和第二台显示器引起的，但是在禁用相同的问题之后。

score 1 · Accepted Answer

反而

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

尝试这样做：

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

它总是对我有用，并且可以在不同的显示器上工作。
祝你好运！

score 1 · Accepted Answer

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

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

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

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

您会在themes/style_user.css应用后立即找到相关的 CSS 代码。

2 回答 2