如何仅在单个section中添加图片并避免溢出？

问题根源分析 #

1. 你的<section id="section2" id="profil">存在重复id，HTML规范要求一个元素只能有唯一id，这会导致样式或选择器失效，先修正这个问题。
2. 图片默认是inline-block元素，若原始尺寸大于section宽度就会溢出容器；另外#section1设了固定宽度1519px加padding:50px，默认盒模型下总宽度是1519+100=1619px，会超出多数屏幕宽度，间接影响后续section布局。
3. 调整padding没让图片左移，大概率是section本身有默认margin/padding，或是图片的inline特性自带间距导致的。

纯CSS/HTML修复步骤 #

• 第一步：修正HTML结构
  删掉重复的id，把其中一个转为class：

  <section class="main section2" id="profil">
  

• 第二步：约束图片尺寸并实现左对齐
  给图片添加CSS规则，让它适配容器同时消除默认间距：

  #profil img {
    max-width: 100%; /* 图片宽度不超过父容器 */
    height: auto; /* 保持图片比例 */
    display: block; /* 消除inline元素默认间距，实现完全左对齐 */
    margin: 0; /* 重置默认margin */
  }
  

• 第三步：修复section1的布局溢出问题
  使用box-sizing: border-box让padding包含在width内，改用百分比宽度适配不同屏幕：

  #section1 {
    height: 580px;
    width: 100%; /* 适配屏幕宽度 */
    background-color: #0E2E3B;
    padding: 50px;
    box-sizing: border-box; /* padding计入width，避免溢出 */
  }
  

• 第四步：给section2添加容器约束
  确保section2的内容不会溢出：

  #profil {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px; /* 可选，给内容加内边距避免贴边 */
    overflow: hidden; /* 强制隐藏超出容器的内容 */
  }
  

修改后的完整代码 #

#section1 {
  height: 580px;
  width: 100%;
  background-color: #0E2E3B;
  padding: 50px;
  box-sizing: border-box;
}

#profil {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  overflow: hidden;
}

#profil img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

<body>
<section id="section1">
</section>
<section class="main" id="profil">
    <h1>Lorem</h1>
    <h2>Lorem</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <img src="pancasila.jpg">
</section>
</body>

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