如何根据用户视口调整图片宽高且保持宽高比不变？

适配实现步骤 #

1. 补全viewport配置 #

需要先在index.html的<head>标签内添加viewport元标签，确保移动设备能正确识别屏幕尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段配置的作用是让视口宽度等于设备物理屏幕宽度，初始缩放比例为1，如需禁止用户手动缩放可以追加user-scalable=no参数，按需选择即可。

2. 修复样式生效问题 #

当前代码的核心问题是：object-fit属性仅对替换元素（比如<img>、<video>）生效，写在父容器.Image上不会作用到内部图片。另外浏览器默认会给<body>加8px的外边距，会导致页面出现滚动条，需要先重置默认样式。

3. 适配方案选择 #

根据不拉伸、适配屏幕的需求，可以二选一：

• 方案1：完整显示图片（无裁剪，可能出现空白边）：适合需要完整展示整张背景图的场景，图片按原始比例缩放，直到完全装入屏幕，超出部分显示为页面背景色
• 方案2：铺满整个屏幕（裁剪超出部分，无空白）：适合可以接受图片边缘被裁剪的场景，图片按原始比例缩放，直到完全覆盖整个屏幕，超出部分自动裁剪

完整可运行代码示例 #

index.html 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 新增viewport配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Image">
        <img src="Background.png" alt="背景图">
    </div>
</body>
</html>

style.css 代码 #

/* 先重置默认边距，避免出现多余滚动条 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 方案1：完整显示图片 */
.Image {
    width: 100vw;
    height: 100vh;
    /* 让图片在容器内居中，避免空白边集中在一侧 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.Image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持原始比例，完整显示图片 */
}

/* 如果要改用方案2，只需把img的object-fit属性改成cover即可
.Image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
*/

可选优化：纯CSS背景实现 #

如果这张图仅作为背景使用，不需要作为img元素插入DOM，也可以直接给body设置背景样式，代码更简洁：

body {
    width: 100vw;
    height: 100vh;
    background: url("Background.png") no-repeat center center;
    /* 完整显示用contain，铺满屏幕用cover */
    background-size: contain;
}

内容的提问来源于stack exchange，提问作者AaronTheGladiator