<img>标签布局问题：实现四张图片2×2重叠排列

嘿，我来帮你搞定这个布局需求！想要实现四张透明圆形图两两重叠的2×2布局，核心思路是用容器嵌套+相对/绝对定位实现图片重叠，再用CSS Grid或Flexbox搭建2×2的整体框架。我给你整理了具体的实现方案，还优化了原代码的结构（尽量少用inline style，方便后续维护）：

步骤1：HTML结构重构 #

先把每组重叠的图片放进独立容器，再将这些容器纳入网格容器，形成2×2的布局结构：

<div class="image-grid">
  <!-- 第一组重叠图片（左上） -->
  <div class="image-pair">
    <img class="img-responsive base-img" src="~/Images/p1.png" alt="图片1">
    <img class="img-responsive overlay-img" src="~/Images/p3.png" alt="图片3">
  </div>
  <!-- 第二组重叠图片（右上） -->
  <div class="image-pair">
    <img class="img-responsive base-img" src="~/Images/p2.png" alt="图片2">
    <img class="img-responsive overlay-img" src="~/Images/p4.png" alt="图片4">
  </div>
  <!-- 如果需要左下、右下的重叠组，直接复制上面的结构即可 -->
  <!-- <div class="image-pair">...</div> -->
  <!-- <div class="image-pair">...</div> -->
</div>

步骤2：CSS样式设置 #

用CSS实现重叠效果和响应式布局：

/* 2×2网格容器，自动适配宽度并居中 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2等宽列 */
  gap: 20px; /* 组与组之间的间距，可自行调整 */
  max-width: 800px; /* 限制最大宽度，避免屏幕过宽时图片变形 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
}

/* 每组重叠图片的容器，作为绝对定位的参考容器 */
.image-pair {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 保持正方形比例，适配圆形图片 */
}

/* 基础图片样式，铺满容器 */
.img-responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 重叠图片的位置调整，对应你原代码的margin参数 */
.overlay-img {
  top: 8%; /* 对应原代码的margin-top:8% */
  left: 0; /* 对应原代码的margin-left:0% */
  /* 如果需要调整重叠图片的大小，可添加 width: 90%; height:90%; 等样式 */
}

关键细节说明 #

• 响应式比例：用padding-top:100%让图片容器保持正方形，确保圆形图片在任何屏幕尺寸下都不会变形。
• 重叠控制：通过.overlay-img的top/left属性调整重叠位置，数值可以完全匹配你原代码的margin参数，保证效果和之前一致。
• Flexbox替代方案：如果不想用Grid，也可以用Flexbox实现2×2布局，把.image-grid和.image-pair的样式改成：

  .image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  .image-pair {
    flex: 0 0 calc(50% - 10px); /* 每列占一半宽度，减去gap的一半 */
    position: relative;
    padding-top: calc(50% - 10px);
  }
  

这样调整后，你就能得到一个适配各种屏幕的2×2布局，每组里的两张图片完美重叠，和你之前的效果保持一致~

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