javascript - 如何使用 JavaScripts 按中心对齐 2 张图像

Question

我有 2 张图片，其中一张有 mask 区域。通过上图的 Masked 区域可以看到另一幅图像。我想将第二张图片居中放置在第一张图片的 mask 区域内。

目前我正在使用下面的函数缩放图像以与 mask 区域匹配(它有 3 行代码我尝试对齐 - 虽然没有工作)，

function scaleimage(img){

    img.style.height = 'auto';
    img.style.width = 'auto';

   //Getting the image hight and width
    var imgW = img.clientWidth;
    var imgH = img.clientHeight;

   //Getting the mask hight and width
    var maskH = data.result.mask.maskhight;
    var maskW = data.result.mask.maskwidth;

    var scaleH = maskH / imgH;
    var scaleW = maskW / imgW;

   // Scaling
    if (scaleH < scaleW) {
        img.style.height = maskH + "px";
        img.style.width = Math.round(imgW * scaleH) + "px";
    } else {
        img.style.width = maskW + "px";
        img.style.height = Math.round(imgH * scaleW) + "px";
    }

      //Align image - commented below code since it didnt work

  /*img.style.top = Math.round((mask1H - imgH) / 2) + 'px';
    img.style.left = '50%';
    img.style.marginLeft = Math.round(imgW/2) + 'px'; */

}

当前和预期结果作为示例。 IMAGE 1 有一个可以透视的 Mask 区域，而 IMAGE 2 在 IMAGE 1 的后面，但将其左上角与 Mask Area 的左上角对齐。我要的是，IMAGE 2 center = Mask Area Center

我尝试了一些东西，但没有一个是完全正确的，任何反馈都会非常有帮助

Answer 1

如果我从你的代码中理解正确的话。您想调整图像大小以固定到您的面具中。我用你的函数写了一个演示 here .因为我不知道您的真实 HTML，所以我使用我自己的代码以及预定义值 maskW 和 maskH。

另一件需要注意的事情:如果你想手动布局，你应该将图像样式的 position 属性设置为不同于默认 static 值的另一个值。在演示中，我将 img 元素的 position 值设置为 absolute。