如何让div内横向排列的图片不溢出容器且保持响应式缩放

问题原因 #

你当前代码存在两个核心问题导致溢出：

1. 给每张子图片设置了width: 100%，相当于每张图片都要占满flex容器的全部宽度，自然会撑破容器
2. 外层#main容器设置了固定宽度390px，无法随浏览器窗口缩放调整大小

解决代码 #

修改后CSS

#main {
  background-color: #666666;
  padding: 60px;
  /* 固定宽度改最大宽度，小屏自动收缩，大屏最大保持390px */
  max-width: 390px;
}

#second {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
  /* 用gap统一控制子元素间距，无需单独处理最后一个元素的边距 */
  gap: 30px;
}

.img-child {
  /* 让三个子元素平分flex容器可用宽度 */
  flex: 1;
  /* 限制最大宽度，配合间隙避免溢出 */
  max-width: calc((100% - 60px) / 3);
  /* 高度自适应，保持图片原始比例不变形 */
  height: auto;
}

#img-parent {
  width: 100%;
  height: auto;
}

优化后HTML（仅补全id属性引号，符合规范）

<div id="main">
  <div id="second">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
  </div>
  <img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

效果说明 #

修改后三张图片会始终保持横向等宽排列，间隙固定为30px，不会溢出外层容器，整体尺寸会随浏览器窗口大小自动缩放，同时图片不会变形。

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