通过设置 img { width: 100%; height: auto; display: block; } 并确保父容器无内边距、外边距及最大宽度限制，即可实现图片在移动端（max-width: 768px）下自适应铺满视口宽度。

通过设置 img { width: 100%; height: auto; display: block; } 并确保父容器无内边距、外边距及最大宽度限制，即可实现图片在移动端（max-width: 768px）下自适应铺满视口宽度。

要让图片在小屏幕（如手机、平板，即 max-width: 768px）下真正铺满整个视口宽度，关键在于消除默认样式干扰并精准控制尺寸继承链。许多初学者遇到“设置了 width: 100% 却无效”的问题，往往是因为父容器（如 .container）本身受限于默认 max-width、padding、margin，或 默认为行内元素导致底部留白。

✅ 正确做法如下：

1. 重置基础样式，消除干扰

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

或至少重置 body 和容器：

body {
  margin: 0;
  padding: 0;
}

2. 确保父容器不约束宽度

.container {
  width: 100%;           /* 关键：使用 width 而非 max-width */
  max-width: none;       /* 防止框架/重置样式影响 */
  padding: 0;            /* 移除内边距 */
  margin: 0;             /* 移除外边距 */
  overflow: hidden;      /* 防止子元素溢出造成滚动条 */
}

3. 图片自身必须“无条件撑满”

img {
  width: 100%;     /* 强制宽度占满父容器 */
  height: auto;    /* 保持宽高比，避免拉伸变形 */
  display: block;  /* 消除行内元素默认的基线间隙（常见底部空白来源） */
  /* 可选增强：防止用户缩放时被裁剪 */
  object-fit: cover; /* 若需裁剪适配，可替换为 contain / cover */
}

⚠️ 注意事项：

• 不要对 设置固定 height（如 height: 300px），否则会破坏响应式；
• 避免在 .container 上设置 max-width: 1200px 等限制性值——它在小屏下仍生效，导致图片无法突破该宽度；
• 如果使用 Flexbox 布局（如 flex-direction: column），请确认 flex-item（即图片或其容器）未被 flex-shrink: 0 或 min-width 锁死宽度；
• 在媒体查询中无需额外写 width: 100% —— 上述规则已全局生效；若仅需小屏生效，可包裹为：

  @media (max-width: 768px) {
  img {
    width: 100%;
    height: auto;
    display: block;
  }
  .container {
    width: 100%;
    padding: 0;
  }
  }

? 总结：图片全宽显示的本质是「清除所有宽度限制层级」——从 html/body → 父容器 → 自身，逐级确保 100% 能真实传递到视口宽度。掌握这一链式控制逻辑，将为你后续处理响应式布局打下坚实基础。