通过设置外层容器尺寸并让内部图像自适应填充，可实现 div 精确裁剪为图像大小，并稳定覆盖于其上，适用于画框、遮罩、标注等场景。
通过设置外层容器尺寸并让内部图像自适应填充，可实现 div 精确裁剪为图像大小，并稳定覆盖于其上，适用于画框、遮罩、标注等场景。
在网页开发中，常需将一个 <div>（如用于绘制标注框、遮罩层或装饰边框）严格限制为与背景图像完全等宽高等比例的尺寸，并精准叠加于图像之上。核心思路不是“裁剪图像”，而是控制容器尺寸 + 强制图像拉伸/填充该容器，从而让容器自身成为视觉上的“裁剪区域”。
✅ 正确实现方式
移除冗余的百分比宽度（如 width: 85%），改为：
- 显式设定外层 <div> 的宽高（推荐使用 px、rem 或基于容器的 vw/vh，避免依赖父级不确定的百分比）；
- 将 <img> 的 width 和 height 均设为 100%，并添加 object-fit: cover（保持比例裁剪填充）或 object-fit: fill（强制拉伸填满，无黑边）。
<div class="col-9" style="display: flex; justify-content: center;">
<!-- 裁剪容器：尺寸即目标显示区域 -->
<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 <img>：消除行内元素默认底部空白间隙；
- 若需响应式适配，建议用 CSS 容器查询（Container Queries）或 aspect-ratio 配合 max-width，而非单纯百分比。
✅ 总结
裁剪 div 实质是定义容器视口 + 让图像服从该视口。与其尝试“剪切”内容，不如主动控制布局边界——设定明确尺寸、启用 object-fit、约束溢出行为，即可稳定、可复现地实现像素级对齐的覆盖层效果。
