响应式图片铺满全页面 移动端无法100%覆盖屏幕宽度问题

现有实现仅对img标签设置了百分比尺寸，缺少父级容器、根元素的尺寸基准，加上img默认行内元素的渲染特性，会导致移动端百分比尺寸计算失效，无法铺满屏幕。

可直接复用的修复代码 #

CSS部分 #

替换原有CSS代码为以下内容：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* 给根节点绑定视口尺寸，作为所有子元素百分比尺寸的计算基准 */
html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}
/* 图片外层容器直接占满整个视口 */
.responsive {
  width: 100vw;
  min-height: 100vh;
}
.responsive a {
  display: block;
  width: 100%;
  height: 100%;
}
.responsive img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

HTML部分 #

保留原有的viewport标签和DOM结构即可，无需修改：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<div class="responsive">
  <a href="#" ><img src="img/d.png"> </a>
</div>

关键修复逻辑 #

• 百分比宽高的计算依赖直接父元素的明确尺寸，原有代码没有给html、body、外层.responsive容器、a标签设置宽高基准，img的min-height:100%等规则在移动端无法正确计算
• 给img设置display: block，消除行内元素默认基线对齐带来的底部间隙，避免出现宽度计算偏差、底部留白问题
• 用100vw/100vh直接读取视口宽高，比多层级的百分比计算在移动端兼容性更好
• 增加overflow-x: hidden和box-sizing: border-box，避免边框、内边距导致元素宽度超出屏幕，触发横向滚动
• 固定用object-fit: cover保证图片不变形，自动裁剪边缘适配不同屏幕比例

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