如何在HTML/CSS中为图片叠加矩形？未知宽高比适配求助

核心思路是放弃背景图的实现方式，改用<img>标签承载图片——img标签会自动维持自身宽高比，容器可直接跟随图片尺寸自适应，同时让矩形基于容器做绝对定位，完美匹配图片的相对坐标。

以下是完整可复用的代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 容器：相对定位，由内部图片撑开尺寸，超出视口时显示滚动条 */
    .image-overlay-container {
      position: relative;
      display: inline-block; /* 让容器宽度匹配图片实际宽度 */
      max-width: 100vw;
      max-height: 100vh;
      overflow: auto; /* 图片过大时显示滚动条 */
    }

    /* 图片：自适应容器宽度，维持自身宽高比 */
    .overlay-image {
      max-width: 100%;
      height: auto;
      display: block; /* 消除img默认的行内元素间距 */
    }

    /* 矩形样式：绝对定位，相对容器（即图片）定位 */
    .overlay-rectangle {
      position: absolute;
      border: 2px solid red;
      background-color: rgba(255, 0, 0, 0.2);
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="image-overlay-container">
    <img class="overlay-image" src="https://picsum.photos/200/300" alt="示例图片">
    <!-- 按给定的相对坐标添加矩形 -->
    <div class="overlay-rectangle" style="top: 10%; left: 20%; width: 30%; height: 40%;"></div>
    <div class="overlay-rectangle" style="top: 15%; left: 20%; width: 20%; height: 40%;"></div>
    <div class="overlay-rectangle" style="top: 5%; left: 40%; width: 10%; height: 10%;"></div>
  </div>
</body>
</html>

关键细节说明 #

• 容器自适应：.image-overlay-container用inline-block让宽度完全匹配图片的原始宽度（或最大视口宽度），无需手动计算任何比例值。
• 图片比例维持：.overlay-image的max-width:100%和height:auto保证图片在容器内自适应缩放时，始终保持原始宽高比。
• 矩形定位准确：所有矩形的top/left/width/height百分比都是相对.image-overlay-container的尺寸，而容器尺寸完全跟随图片，所以无论图片缩放还是容器滚动，矩形都能精准对应图片上的位置。
• 滚动条处理：当图片尺寸超过视口时，容器会自动显示滚动条，此时矩形依然跟随图片滚动，不会错位。

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