求助：React项目中图片无法填充屏幕左侧边缘问题（附代码）

问题排查与解决方案 #

1. 清除浏览器全局默认样式
   浏览器默认会给<html>和<body>标签添加margin（比如Chrome中body默认margin: 8px），这是导致左侧空白的核心原因。在你的CSS中添加全局重置：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 避免出现横向滚动条 */
}

2. 调整容器与图片样式
   确保容器和图片都占满对应宽度，移除多余的margin设置：

.container{
  margin: 0;
  padding: 0;
  width: 100%; /* 容器铺满屏幕宽度 */
}

.pictures {
  margin: 0;
  padding: 0;
  width: 100%; /* 图片容器占满父容器宽度 */
}

.container .pictures img{
  width: 100%; /* 图片宽度拉满容器 */
  height: auto; /* 保持图片原有比例 */
  margin: 0; /* 移除无用的margin-right */
  display: block; /* 消除inline图片自带的默认间距 */
}

3. 修正图片路径（可选）
   如果使用Next.js这类框架，建议将图片放在public目录下，路径改为/pictures/home.jpg，避免相对路径出错导致的布局异常。

修改后的完整代码示例 #

JS文件：

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="首页图片" />  
        </div>
      </div>
    </>
  )
}

CSS文件：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.container{
  margin: 0;
  padding: 0;
  width: 100%;
}

.pictures {
  margin: 0;
  padding: 0;
  width: 100%;
}

.container .pictures img{
  width: 100%;
  height: auto;
  margin: 0;
  display: block;
}

内容的提问来源于stack exchange，提问作者William Sebastian