HTML+CSS实现全屏响应式图片四周留白问题修复方案

四周出现空白是三个默认样式问题导致的：

1. 浏览器默认给body标签加了8px的外边距，原有代码没有重置这个默认值
2. img默认是行内元素，会和文本基线对齐产生底部间隙
3. 原有CSS把overflow-x: hidden错误绑定到了img元素上，同时width: auto的写法会让图片无法按容器宽度拉伸。直接用下面的代码替换原有CSS即可，HTML部分的viewport配置不需要修改。

修复后的完整CSS代码 #

html, body {
  /* 清除浏览器默认边距 */
  margin: 0;
  padding: 0;
  width: 100%;
  /* 滚动规则：禁止水平滚动，允许垂直滚动 */
  overflow-x: hidden;
  overflow-y: auto;
}

img {
  /* 转块级元素消除行内基线带来的底部间隙 */
  display: block;
  /* 宽度始终铺满视口，高度按原始比例自适应 */
  width: 100%;
  height: auto;
  max-width: 100%;
}

规则对应说明 #

• 允许垂直滚动：图片高度按原始比例计算，当图片总高度超过视口高度时，根容器会自动展示垂直滚动条
• 禁止水平滚动：根容器强制隐藏横向溢出，同时图片宽度始终和视口宽度保持一致，不会出现横向内容溢出
• 无边距响应式适配：清除了根节点默认边距、消除了图片底部间隙，图片宽度100%适配设备宽度，所有尺寸下都不会出现四周白边

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