javascript - HTML：使图像填满屏幕，保持不同分辨率的纵横比

Question

我在制作 HTML 页面时遇到问题。具体来说，我想要一个特定大小的背景图像（大于屏幕）；但是，我希望保持纵横比并且图像尽可能多地填充屏幕（不平铺）。

我还希望能够相对于背景图像定位其他元素；背景是内容的一部分，我希望其他元素（例如文本）以浏览器窗口的分辨率保持其在图像中的位置。

谁能给我一个解决方案？我可以（显然）使用 HTML、CSS 和 JavaScript。如果找不到解决方案，我会将图像设置为 800X600 或 1024x768 并坚持该分辨率。我希望我不必诉诸于此。

编辑：我应该提到它backgound-size: contain;不像预期的那样工作。至少对我来说不是。

score 1 · Accepted Answer

使用 css 背景大小值“包含”

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:contain;
}

1 回答 1