求助：解决2x2网格布局中图片自适应与定位元素的冲突问题

需求回顾 #

• 4张图片在2x2网格的单元格内居中显示
• 屏幕高度不足时，图片自动缩小以完整显示，不被裁剪
• 每个图片的右下角固定显示包含字母“O”的元素

核心问题分析 #

原代码的冲突源于：当给relative-div设置width:100%和height:100%时，它会占满整个网格单元格，导致定位的“O”元素出现在单元格右下角而非图片右下角；若关闭这两个属性，图片无法自适应单元格尺寸，会被裁剪。

修复思路 #

让relative-div的尺寸由图片实际显示大小决定，但同时限制其最大宽高不超过网格单元格的可用空间，这样既保证图片能自适应缩放，又能让“O”元素相对于图片定位。

修改后的完整代码 #

CSS #

.outermost-container {
  padding: 40px;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  width: 100%;
  height: 100%;
}

.image-centering-div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.relative-div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* 限制最大宽高不超过父元素，保证图片自适应单元格 */
  max-width: 100%;
  max-height: 100%;
}

.relative-div img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.O-div {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 可选：添加样式让“O”更醒目 */
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 12px;
  font-size: 18px;
}

HTML #

<body style="margin: 0">
  <div class="outermost-container">
    <div class="container">
      <div class="image-centering-div">
        <div class="relative-div">
          <img src="https://wallpapercave.com/dwp2x/wp4471355.jpg" alt="">
          <div class="O-div">O</div>
        </div>
      </div>
      <div class="image-centering-div">
        <div class="relative-div">
          <img src="https://plus.unsplash.com/premium_photo-1699534956827-a02df22f4e3a?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
          <div class="O-div">O</div>
        </div>
      </div>
      <div class="image-centering-div">
        <div class="relative-div">
          <img src="https://images.unsplash.com/photo-1510505678115-f2a7ae4cfea9?q=80&w=1681&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
          <div class="O-div">O</div>
        </div>
      </div>
      <div class="image-centering-div">
        <div class="relative-div">
          <img src="https://plus.unsplash.com/premium_photo-1661852207925-4f1d03556a2e?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
          <div class="O-div">O</div>
        </div>
      </div>
    </div>
  </div>
</body>

关键修改点说明 #

1. relative-div的尺寸控制：移除width:100%和height:100%，添加max-width:100%和max-height:100%。这样容器会根据图片的原始尺寸自适应大小，但不会超出网格单元格的边界。
2. 保留定位上下文：relative-div的position:relative保留，确保“O”元素的绝对定位是相对于图片容器而非整个单元格。
3. 图片自适应：图片的max-width和max-height设置为100%，保证图片能根据容器尺寸自动缩放，同时width:auto和height:auto维持图片的原始比例。

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