Angular图片缩放功能问题：拖拽手柄无法正确环绕图片，父Div尺寸基于窗口而非图片

我一眼就看出问题出在哪了——你的拖拽手柄用了position: fixed，这个定位是相对于浏览器视口的，而不是包裹图片的容器，所以才会出现手柄没法对齐图片的情况。下面是具体的修复方案：

核心修改步骤 #

1. 为手柄容器设置定位上下文 #

把.resize-container-handler改成相对定位，这样里面的手柄元素就能以它为基准定位：

.resize-container-handler {
  z-index: 3;
  overflow: visible;
  min-inline-size: max-content;
  min-width: 30px;
  min-height: 30px;
  will-change: width, height, transform;
  position: relative; /* 新增这行 */
}

2. 修改手柄的定位方式 #

把.resize-corner-container的position: fixed改成position: absolute，这样手柄就会相对于上面设置的相对定位容器来对齐：

.resize-corner-container {
  height: 30px;
  width: 30px;
  position: absolute; /* 把fixed改成absolute */
  pointer-events: auto;
  display: flex;
}

3. 让容器自适应图片宽度 #

默认的div是块级元素，会占满父容器的宽度，给.resize-container加上display: inline-block，让它的宽度刚好包裹图片：

.resize-container {
  text-align: center;
  border: 2px solid #335eea !important;
  display: inline-block; /* 新增这行 */
}

完整修改后的CSS代码 #

.resize-container {
  text-align: center;
  border: 2px solid #335eea !important;
  display: inline-block;
}
.resize-container-handler {
  z-index: 3;
  overflow: visible;
  min-inline-size: max-content;
  min-width: 30px;
  min-height: 30px;
  will-change: width, height, transform;
  position: relative;
}
.resize-corner-container {
  height: 30px;
  width: 30px;
  position: absolute;
  pointer-events: auto;
  display: flex;
}
.resize-corner-handle {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  box-shadow: 0 0 5px 1px rgba(14, 19, 24, 0.15), 0 0 0 1px rgba(14, 19, 24, 0.2);
  position: relative;
  background: #fff;
  display: flex;
  margin: auto;
  z-index: 1;
}
.resize-corner-top-right {
  z-index: 1;
  top: -15px;
  right: -15px;
  cursor: nesw-resize;
}
.resize-corner-top-left {
  z-index: 1;
  top: -15px;
  left: -15px;
  cursor: nwse-resize;
}
.resize-corner-bottom-right {
  z-index: 1;
  bottom: -15px;
  right: -15px;
  cursor: nwse-resize;
}
.resize-corner-bottom-left {
  z-index: 1;
  bottom: -15px;
  left: -15px;
  cursor: nesw-resize;
}

为什么这样修改？ #

• position: relative给子元素提供了定位参考点，让absolute定位的手柄不再依赖视口
• position: absolute让手柄相对于父容器的四个角落定位，完美贴合图片边框
• display: inline-block确保容器宽度和图片一致，不会出现边框过宽的情况

这样修改后，你的拖拽手柄应该就能整齐地环绕在图片周围了！

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