本文详解如何通过 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 优势。本方案兼顾语义性与精准控制，是现代前端开发中的推荐实践。
