如何确保HTML中图片上绘制的矩形始终保持正确相对位置？

我有一批存储在外部服务器的图片，分辨率各不相同。每张图片对应多组百分比坐标（示例：{"top: 10%; left: 20%; width: 30%; height: 40%;}），每组坐标定义图片上的一个矩形，需求是为这些矩形添加红色边框与半透红色填充。

我已编写如下代码并初步可用：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Set the image as the background */
    .image-container {
      background-image: url("my-img-1.jpg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 75%; /* Adjust this value to maintain the aspect ratio of the image */
    }
    
    /* Define the rectangles using absolute positioning */
    .rectangle {
      position: absolute;
      border: 2px solid red;
      background-color: rgba(255, 0, 0, 0.2); /* Light shade of transparent red */
      z-index: 1; /* Ensure the rectangles appear above the image */
    }
  </style>
</head>
<body>
  <div class="image-container">
    <!-- Define the rectangles using the provided coordinates -->
    <div class="rectangle" style="top: 10%; left: 20%; width: 30%; height: 40%;"></div>
    <div class="rectangle" style="top: 50%; left: 60%; width: 20%; height: 30%;"></div>
    <!-- Add more rectangles as needed -->
  </div>
</body>
</html>

但我需要确保：无论原图尺寸、屏幕大小、浏览器窗口尺寸等变量如何，矩形都能保持相对图片的正确位置。我不确定当前代码是否能实现这一点，尤其对.image-container中的width、height、padding-bottom属性存疑——设置75%的padding-bottom是否会导致图片水平压缩，进而让矩形位置偏移？目前视觉上显示正常，但希望确认是否需要调整代码以避免任何情况下的位置错误。

当前代码的核心问题 #

固定的padding-bottom: 75%是硬编码的4:3图片比例（高度/宽度=0.75），如果你的图片是其他比例（比如16:9是56.25%、1:1是100%），容器的比例会和图片不匹配：

• 背景图用contain会在容器内居中显示，留下左右或上下的空白区域
• 矩形的百分比定位是相对于容器的，而非图片本身，这会导致矩形位置和图片上的目标区域偏移

可靠解决方案：用<img>标签替代背景图 #

这种方式无需手动计算比例，容器尺寸会自动匹配图片的显示尺寸，矩形的百分比定位完全对应图片区域，适配所有场景：

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      position: relative;
      width: 100%; /* 容器占满父容器宽度，可按需调整 */
      max-width: 1000px; /* 可选：限制图片最大显示宽度 */
      margin: 0 auto; /* 可选：让容器居中 */
    }

    .image-container img {
      width: 100%;
      height: auto;
      display: block; /* 去掉图片底部默认间隙 */
    }

    .rectangle {
      position: absolute;
      border: 2px solid red;
      background-color: rgba(255, 0, 0, 0.2);
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="my-img-1.jpg" alt="目标图片">
    <!-- 矩形的百分比坐标直接对应图片区域 -->
    <div class="rectangle" style="top: 10%; left: 20%; width: 30%; height: 40%;"></div>
    <div class="rectangle" style="top: 50%; left: 60%; width: 20%; height: 30%;"></div>
  </div>
</body>
</html>

若坚持使用背景图：动态计算比例 #

如果必须用背景图方案，需要通过JS动态获取图片的宽高比，设置容器的padding-bottom，确保容器比例和图片完全一致：

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      background-image: url("my-img-1.jpg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      width: 100%;
      height: 0;
      /* 这里留空，由JS动态设置 */
    }
    
    .rectangle {
      position: absolute;
      border: 2px solid red;
      background-color: rgba(255, 0, 0, 0.2);
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <div class="rectangle" style="top: 10%; left: 20%; width: 30%; height: 40%;"></div>
    <div class="rectangle" style="top: 50%; left: 60%; width: 20%; height: 30%;"></div>
  </div>

  <script>
    // 创建临时图片对象获取原图尺寸
    const img = new Image();
    img.src = 'my-img-1.jpg';
    img.onload = function() {
      // 计算宽高比：(高度/宽度)*100%
      const aspectRatio = (this.height / this.width) * 100;
      document.querySelector('.image-container').style.paddingBottom = `${aspectRatio}%`;
    };
  </script>
</body>
</html>

总结 #

• 推荐使用<img>标签方案，无需额外计算，兼容性和可靠性更好
• 背景图方案必须动态匹配图片比例，否则会出现矩形偏移问题
• 两种方案都能保证：无论屏幕大小、图片分辨率如何，矩形始终精准对应图片上的目标区域

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