寻找适配Angular10+ 支持div、文本、图片居中缩放的第三方库

可用第三方库 #

• ngx-panzoom
  支持Angular10及以上版本，可作用于任意DOM元素，包含div、倾斜文本、图片等类型，默认缩放原点为元素中心，同时支持平移、边界限制等附加功能，无需额外处理缩放偏移问题，可直接适配倾斜、旋转后的元素缩放需求。
• angular-resizable-element
  适配Angular10+版本，支持自定义缩放触发原点，配置resizeOrigin: 'center'即可实现中心点缩放，同时支持自定义缩放手柄、缩放比例限制等参数，可灵活适配不同场景的缩放需求。

原生CSS transform: scale() 居中缩放内容丢失修复 #

使用transform: scale()出现左侧内容丢失的问题，核心原因是未显式指定缩放原点，以及外层容器未做溢出适配，可参考以下代码调整：

/* 外层容器 */
.scale-container {
  width: 500px;
  height: 500px;
  overflow: auto;
  border: 1px solid #e5e7eb;
}

/* 待缩放目标元素 */
.scale-target {
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* 放大状态样式 */
.scale-target.zoom-active {
  transform: scale(1.5);
}

如果需要实现滚轮动态缩放，可通过Angular的HostListener监听滚轮事件，动态修改scale值即可实现，无需额外引入第三方依赖。

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