通过设置外层容器尺寸并让内部图像自适应填充，可实现 div 精确裁剪为图像大小，并稳定覆盖于其上，适用于画框、遮罩、标注等场景。

通过设置外层容器尺寸并让内部图像自适应填充，可实现 div 精确裁剪为图像大小，并稳定覆盖于其上，适用于画框、遮罩、标注等场景。

在网页开发中，常需将一个

（如用于绘制标注框、遮罩层或装饰边框）严格限制为与背景图像完全等宽高等比例的尺寸，并精准叠加于图像之上。核心思路不是“裁剪图像”，而是控制容器尺寸 + 强制图像拉伸/填充该容器，从而让容器自身成为视觉上的“裁剪区域”。

✅ 正确实现方式

移除冗余的百分比宽度（如 width: 85%），改为：

• 显式设定外层
  的宽高（推荐使用 px、rem 或基于容器的 vw/vh，避免依赖父级不确定的百分比）；
• 将 的 width 和 height 均设为 100%，并添加 object-fit: cover（保持比例裁剪填充）或 object-fit: fill（强制拉伸填满，无黑边）。

<div class="col-9"   style="max-width:90%">
  <!-- 裁剪容器：尺寸即目标显示区域 -->
  <div class="overlay-box" 
       style="width: 400px; height: 250px; 
              border: 4px solid #000; 
              position: relative; 
              overflow: hidden;">
    <!-- 图像完全填充容器，覆盖整个区域 -->
    <img src="../Images/fov110.png" 
         style="width: 100%; height: 100%; 
                object-fit: cover; 
                display: block;">
  </div>
</div>

? object-fit: cover 会等比缩放并居中裁剪图像以完全填满容器（可能丢失边缘内容）；若需无失真拉伸（如 UI 示意图），改用 object-fit: fill。

⚠️ 注意事项

• 避免 width: 85% 类浮动值：它依赖父容器宽度，导致尺寸不可控，无法精确对齐图像原始比例；
• 务必设 overflow: hidden：防止图像溢出容器破坏“裁剪”效果；
• 添加 position: relative：为后续绝对定位子元素（如标注文字、坐标框）提供定位上下文；
• display: block on ：消除行内元素默认底部空白间隙；
• 若需响应式适配，建议用 CSS 容器查询（Container Queries）或 aspect-ratio 配合 max-width，而非单纯百分比。

✅ 总结

裁剪 div 实质是定义容器视口 + 让图像服从该视口。与其尝试“剪切”内容，不如主动控制布局边界——设定明确尺寸、启用 object-fit、约束溢出行为，即可稳定、可复现地实现像素级对齐的覆盖层效果。