如何让图片完整铺满容器并贴紧屏幕边缘

通过设置父容器为相对定位、图片为绝对定位，并将图片宽高设为100%，可强制图片填满整个容器，消除默认边距与缩放限制。

通过设置父容器为相对定位、图片为绝对定位，并将图片宽高设为100%，可强制图片填满整个容器，消除默认边距与缩放限制。

在 React + CSS Modules 项目中，图片无法贴合容器边缘（尤其是左侧留白）是一个常见问题。根本原因通常不是代码逻辑错误，而是浏览器对 <img> 元素的默认渲染行为：<img> 是内联元素（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 结构嵌套：确保 <img> 是 .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>  );}

该方案彻底绕过内联元素固有行为，通过层叠上下文精准控制尺寸与位置，一次配置即可稳定生效。