使用百分比调整内联图像大小

Question

我在按百分比内联调整图像大小时遇到​​问题（即具有 10% 到 100% 的硬限制）。

我正在努力解决的问题是 ResizeContainerService -> resizeElement 中处理调整大小的代码。

我不确定在线和实时调整图像大小所需的计算。 现在它只是向我抛出一些有趣的数字。 有人可以帮我处理他的吗？

这是resizeElement的代码：

 resizeElement(
    mouseEvent: MouseEvent,
    initialResizeCourseContentElement:
      | ICourseContentElementImage
      | undefined
      | null,
    initialResizeHandleCoordinates:
      | {
          x: number;
          y: number;
          [key: string]: number;
        }
      | null
      | undefined,
    initialResizeItemCoordinates: DOMRect | null | undefined,
    selectedResizeHandleSettingsDetails:
      | IResizeHandleSettingsDetail[]
      | undefined
      | null
  ): void {
    let delta = 0;
    if (
      initialResizeCourseContentElement &&
      initialResizeHandleCoordinates &&
      initialResizeItemCoordinates &&
      selectedResizeHandleSettingsDetails
    ) {
      const resizeCourseContentElement: ICourseContentElementImage = JSON.parse(
        JSON.stringify(initialResizeCourseContentElement)
      );
      selectedResizeHandleSettingsDetails.forEach(
        (selectedResizeHandleSettingsDetail) => {
          if (selectedResizeHandleSettingsDetail.eventProperty === 'clientX') {
            delta =
              (mouseEvent.clientX -
                initialResizeHandleCoordinates[
                  selectedResizeHandleSettingsDetail.axis
                ]) *
              selectedResizeHandleSettingsDetail.deltaMultiplier;
            resizeCourseContentElement.width =
              (100 * initialResizeItemCoordinates['x'] + delta) / 1536;
            console.log(resizeCourseContentElement.width);
          }
          if (selectedResizeHandleSettingsDetail.eventProperty === 'clientY') {
            delta =
              (mouseEvent.clientY -
                initialResizeHandleCoordinates[
                  selectedResizeHandleSettingsDetail.axis
                ]) *
              selectedResizeHandleSettingsDetail.deltaMultiplier;
            resizeCourseContentElement.width =
              (100 * initialResizeItemCoordinates['y'] + delta) / 1536;
            console.log(resizeCourseContentElement.width);
          }
        }
      );
    }
  }

我在https://stackblitz.com/edit/angular-ivy-kbrckc为我的代码创建了一个 Stackblitz，所以你可以看到它是如何工作的。