CSS布局不同尺寸图片出现尺寸溢出、位置错位问题求助

你写的.section-2部分完全没加布局规则，也没约束img标签的尺寸，浏览器默认会按图片原始分辨率渲染，必然会出现尺寸过大溢出、位置乱跑的问题。

直接在你现有CSS代码末尾追加以下样式，即可实现参考图里的左右分栏拼贴效果：

/* 解决100vw宽度可能触发的横向滚动条问题，可加到全局样式块里 */
body {
  overflow-x: hidden;
}

/* 拼贴外层容器 */
.section-2 section {
  max-width: 1200px; /* 可根据设计稿要求调整拼贴区域的最大宽度 */
  width: 100%;
  margin: 0 auto; /* 让拼贴区域整体水平居中 */
  display: flex;
  gap: 8px; /* 图片之间的缝隙大小，可按设计稿调整数值 */
}

/* 左右分栏通用规则 */
.section-2 section > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 右栏上下两张图的缝隙，和整体gap数值保持一致即可 */
}

/* 图片自适应约束 */
.section-2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 核心属性：图片自动裁剪填充容器，不会拉伸变形，也不会溢出边界 */
}

• 如果需要固定拼贴区域的整体高度，直接给.section-2 section加height: 目标像素值即可，内部图片会自动适配容器尺寸，不会错位
• 不要直接给img写死固定宽高像素值，用相对容器的百分比尺寸搭配object-fit: cover的写法，适配PC、移动端都不会出现变形、溢出问题
• 你现有banner样式用了width: 100vw，加body { overflow-x: hidden }是为了规避部分浏览器因滚动条占位出现的横向滚动条问题

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