如何让图片完全铺满容器并紧贴屏幕边缘：无空白

本文详解如何通过 CSS 定位与尺寸控制，解决 React 项目中图片无法撑满容器、左侧留白的问题，核心在于正确设置父容器相对定位与图片绝对定位，并配合 width: 100%; height: 100% 和可选的 object-fit 属性。

本文详解如何通过 css 定位与尺寸控制，解决 react 项目中图片无法撑满容器、左侧留白的问题，核心在于正确设置父容器相对定位与图片绝对定位，并配合 `width: 100%; height: 100%` 和可选的 `object-fit` 属性。

在 React + CSS Modules 项目中，常见误区是仅将 margin 和 padding 设为 0，却忽略了默认文档流布局的限制和图片固有尺寸行为。你的 .container 虽已清空内外边距，但 .pictures 容器未显式设宽高，且 <img> 默认为内联元素，会受行内格式化上下文影响（如基线对齐、换行空格等），导致视觉上左侧/底部出现不可见间隙。

✅ 正确解法是采用 “相对定位容器 + 绝对定位图片” 模式：

/* Home.module.css */.container {  width: 100vw; /* 推荐使用 vw 确保占满视口宽度 */  height: 500px; /* 或设为 100vh 实现全屏高度 */  margin: 0;  padding: 0;}.pictures {  position: relative;  width: 100%;  height: 100%;}.pictures img {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  /* 可选：控制图像缩放方式 */  object-fit: cover; /* 推荐：裁剪填充，保持宽高比 */  /* object-fit: fill;   /* 拉伸填充（可能变形） */  /* object-fit: contain; /* 等比缩放，留白（不推荐用于铺满场景） */}

⚠️ 关键注意事项：

• 必须为 .pictures 设置 position: relative，否则 img 的 position: absolute 将相对于最近的定位祖先（可能是 body），导致定位失控；
• 显式声明 top: 0; left: 0; 是确保图片从容器左上角开始铺满的必要条件（仅靠 width/height: 100% 不足）；
• 避免在 <img> 上使用 max-width: 100% 或 display: block 等传统响应式写法——它们适用于流式布局，而非精确铺满；
• 若需适配不同屏幕高度，建议将 .container 的 height 改为 100vh，并添加 overflow: hidden 防止滚动条干扰；
• 图片路径需确认正确：../pictures/home.jpg 在构建后是否可访问？建议改用 public 目录下的绝对路径（如 /pictures/home.jpg）以避免模块解析问题。

? 进阶提示：若希望图片随视口缩放且保持比例，可结合 background-image 方案（CSS background-size: cover），但需牺牲 <img> 的语义化与 SEO 优势。本方案兼顾语义性与精准控制，是现代前端开发中的推荐实践。