通过设置父容器为相对定位、图片为绝对定位，并将图片宽高设为100%，可强制图片填满整个容器，消除默认边距与缩放限制。
通过设置父容器为相对定位、图片为绝对定位，并将图片宽高设为100%，可强制图片填满整个容器，消除默认边距与缩放限制。
在 React + CSS Modules 项目中，图片无法贴合容器边缘（尤其是左侧留白）是一个常见问题。根本原因通常不是代码逻辑错误，而是浏览器对 元素的默认渲染行为：
是内联元素（inline），会受行内布局影响产生基线对齐间隙；同时，若未显式声明尺寸或重置默认样式，其尺寸由内容决定，不会自动拉伸填充父容器。
要实现图片真正铺满容器、紧贴四边，需从布局模型层面重构——推荐使用「相对定位容器 + 绝对定位图片」方案，这是最可控、兼容性好且语义清晰的方式。
✅ 正确做法如下（基于你的 Home.module.css）：
.container {
width: 100vw; /* 推荐用 vw 确保覆盖视口全宽 */
height: 500px; /* 或设为 100vh 实现全屏高度 */
margin: 0;
padding: 0;
overflow: hidden; /* 防止溢出内容干扰 */
}
.pictures {
position: relative;
width: 100%;
height: 100%;
}
.pictures img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 推荐使用 cover 保持比例并填满 */
/* 若需拉伸变形以完全贴合，可用 'fill'；若需完整显示用 'contain' */
}
⚠️ 注意事项：
- 不要依赖 max-width: 100%：它仅限制上限，不强制拉伸；
- 务必为 .pictures 设置 position: relative：这是绝对定位子元素的定位上下文；
- 显式声明 top: 0; left: 0：避免绝对定位元素偏移；
- 慎用 width: 100%; height: 100% 配合 object-fit：cover 最常用（裁剪适配），fill 强制拉伸（可能变形），contain 保证完整但留白；
-
检查 HTML 结构嵌套：确保
是 .pictures 的直接子元素，无意外换行或空格（JSX 中换行会被渲染为文本节点，可能引入间隙）；
- 全局重置可选：在根 CSS 中添加 * { margin: 0; padding: 0; box-sizing: border-box; } 可预防多数默认边距干扰。
最后，在组件中保持结构简洁即可：
import styles from './css/Home.module.css';
export default function Home() {
return (
<div classname="{styles.container}">
<div classname="{styles.pictures}">
<img src="../pictures/home.jpg" alt="Hero banner">
</div>
</div>
);
}
该方案彻底绕过内联元素固有行为，通过层叠上下文精准控制尺寸与位置，一次配置即可稳定生效。
