如何实现响应式图片自适应拉伸填满整个屏幕

现有代码问题 #

当前代码无法实现全屏铺满效果，核心原因有3点：

• 浏览器默认给body标签添加了8px的外边距，导致页面四周出现留白
• .main容器设置了max-width: 900px宽度上限，同时用margin: auto居中，容器本身无法撑满整个屏幕宽度
• 父容器没有设置视口级别的高度，图片设置height:100%无法拿到有效参考值，没法撑满屏幕高度，也没有配置图片适配的拉伸规则

修改后完整代码 #

CSS部分 #

/* 重置浏览器默认内外边距，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #aeddd5;
  /* 让页面最小高度等于视口高度 */
  min-height: 100vh;
}

.main {
  /* 移除原有的max-width、margin限制，让容器占满整个视口 */
  width: 100vw;
  min-height: 100vh;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  /* 图片适配规则可根据需求调整 */
  object-fit: cover;
}

HTML部分 #

原有HTML结构无需调整，保持如下即可：

<body>
  <div class="main">
    <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">
  </div>
</body>

图片适配规则说明 #

可以根据实际需求调整object-fit的属性值：

• cover：保持图片原始比例，裁剪超出屏幕的部分，实现无留白铺满，不会让图片变形
• fill：拉伸图片完全匹配容器尺寸，会填满整个屏幕，但可能导致图片变形
• contain：保持图片比例完整显示整张图，屏幕和图片比例不一致时四周会露出背景色

效果参考 #

当前实现效果：

期望实现效果：

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