如何在图片上方叠加固定定位盒子（div嵌套实现）

我拿到一个包含位置参数（Top、Left、Width、Height）的对象，需要在图片上方绘制对应的边界框。用wrapper div尝试实现后，盒子跑到了图片右上角，没法和图片固定绑定。想实现根据给定坐标在图片上绘制可随图片缩放的边界框，该怎么修改CSS？

现有JSX代码 #

<div key={index} className="wrapper"> 
  <img src={`images/${item.Img_Name}`} className="App-images" alt="" loading="lazy"/>
  <div
    style={{
      position: "inherit",
      top: `${item.Top}px`,
      left: `${item.Left}px`,
      width: `${item.Width}px`,
      height: `${item.Height}px`,
      border: "1px solid red",
    }} className="Box">
  </div> 
</div>

现有CSS代码 #

.Box {
  grid-area: 1 / 1;
  flex: 0 0 33.33333%;
  max-width: 75%;
  margin-top: 20px;
}

.App-images {
  flex: 0 0 33.33333%;
  max-width: 75%;
  margin-top: 20px;
  grid-area: 1 / 1;
}

.wrapper {
  flex: 0 0 33.33333%;
  max-width: 75%;
  margin-top: 20px;
  display: grid;
}

核心要解决两个问题：让边界框以图片为定位基准，让边界框的尺寸/位置随图片缩放比例自适应，具体修改如下：

1. 调整容器与图片的样式 #

把wrapper设为相对定位，作为内部绝对定位元素的基准；图片设置为自适应容器宽度，保持比例：

.wrapper {
  position: relative; /* 关键：让内部绝对定位元素以它为基准 */
  max-width: 75%; /* 保留原有的最大宽度限制 */
  margin-top: 20px;
  /* 去掉flex、grid这些干扰定位的属性 */
}

.App-images {
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片原始比例 */
  display: block; /* 消除图片默认的行内元素间距 */
}

2. 修改边界框的定位与尺寸计算 #

• 把边界框的position改为absolute，这样会相对于wrapper（相对定位）进行定位
• 关键：将像素单位的位置/尺寸转换为百分比，因为像素是固定值，图片缩放后会错位，百分比是相对于容器（即图片缩放后的尺寸）的比例

首先需要提前获取图片的原始宽高（比如从后端接口返回，或者通过JS读取图片的naturalWidth/naturalHeight），然后计算百分比：

// 假设已获取图片原始宽高：imgOriginalWidth、imgOriginalHeight
<div key={index} className="wrapper"> 
  <img 
    src={`images/${item.Img_Name}`} 
    className="App-images" 
    alt="" 
    loading="lazy"
    onLoad={(e) => {
      // 如果没提前获取原始宽高，也可以在图片加载后读取
      const img = e.target;
      console.log('原始宽高:', img.naturalWidth, img.naturalHeight);
    }}
  />
  <div
    style={{
      position: "absolute", // 改为绝对定位
      top: `${(item.Top / imgOriginalHeight) * 100}%`,
      left: `${(item.Left / imgOriginalWidth) * 100}%`,
      width: `${(item.Width / imgOriginalWidth) * 100}%`,
      height: `${(item.Height / imgOriginalHeight) * 100}%`,
      border: "2px solid red", // 加粗边框更明显
      boxSizing: "border-box", // 边框不占额外宽度，避免尺寸偏差
    }} 
    className="Box"
  >
  </div> 
</div>

3. 清理边界框的冗余样式 #

删掉Box类里的flex、grid-area、max-width等无关属性：

.Box {
  /* 只保留必要的样式，其他通过内联style设置 */
  pointer-events: none; /* 可选：让边界框不遮挡图片的点击事件 */
}

这样修改后，边界框会完全贴合图片，并且随着图片缩放自动调整位置和大小，不会出现错位问题。

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