调整图像大小并保持叠加位置

【问题标题】：Resize image and maintain overlay positions调整图像大小并保持叠加位置
【发布时间】：2020-12-31 07:26:06
【问题描述】：

我正在用 Javascript 调整图像的大小，以使图像以正确的纵横比填充父容器。在该图像之上，我有需要以特定坐标覆盖在图像上的项目。

【问题讨论】：

这看起来更像是一张图片scale to fit，而不是一张图片scale to fill。我想您想通过“拟合”找到图像的新原点，然后按与图像相同的比例进行缩放？

【解决方案1】：

您可以使用图像元素的属性来确定要应用于叠加项目的缩放因子。

图像的固有（未缩放）尺寸是：

const unscaledWidth = img.naturalWidth,
  unscaledHeight = img.naturalHeight;

绘制的图像尺寸为：

const scaledWidth = img.offsetWidth,
  scaledHeight = img.offsetHeight;

因此比例因子为：

const scaleX = scaledWidth / unscaledWidth,
  scaleY = scaledHeight / unscaledHeight;

参考：

【讨论】：