使图像填充屏幕，在不同分辨率下保持宽高比

HTML: Making an image fill the screen, preserving the aspect ratio at different resolutions

本文关键字：分辨率 高比 填充 图像 屏幕      更新时间：2023-09-26

我有一个问题，使HTML页面。具体来说，我想要一个特定尺寸的背景图像(大于屏幕);但是，我希望保持宽高比，并且图像尽可能多地填充屏幕(没有平铺)。

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

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

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

使用css background-size value ' contains '

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:contain;
}
相关文章：