如何使用 JavaScript 将 2 个图像按中心对齐答案

【问题标题】：How to align 2 images by their centre using JavaScripts如何使用 JavaScript 将 2 个图像按中心对齐
【发布时间】：2013-07-30 01:17:00
【问题描述】：

我有 2 张图片，其中一张有遮罩区域。通过上图的蒙版区域可以看到另一张图像。我想在第一张图像的蒙版区域内居中第二张图像。

目前我正在使用下面的函数将图像缩放到与蒙版区域匹配（它有 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

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

【问题讨论】：

现在发生了什么？ 2个图像是在彼此之上吗？还是并排？大小一样吗？
我用插图更新了我的问题，说明了现在发生的情况和预期的情况。请看一看。
可以用你的标记、你的 CSS 和你的代码设置一个小提琴吗？
我认为这取决于您在页面中如何称呼它们。在我这样做的网站上，我使用了嵌套 div，内部元素较小，边距为差异的一半。

标签： javascript css alignment

【解决方案1】：

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

另外需要注意的是：如果要手动布局，则应将图像样式的position 属性设置为默认值static 以外的其他值。在演示中，我将img 元素的position 值设置为absolute。

【讨论】：

【解决方案2】：

如果您想尝试，有一个 css 解决方案：

HTML：

<div>
    <img class="image" src="http://dummyimage.com/300x200/0000ff/ffffff&text=image" alt="image">
</div>

CSS：

div {
    width: 150px;
    height: 100px;
    margin: 50px auto 0;
    position: relative;
    background: url(http://dummyimage.com/150x100/000/fff&text=mask) no-repeat center center;
}
.image {
    width: 80%;
    top: 50%;
    left: 50%;
    position: absolute;
    margin: -27% 0 0 -40%;
}

Fiddle

【讨论】：

好东西，但我的 IMAGE 2 动态加载，它可以是具有不同宽度、高度和方向的任何图像。不知道它对动态加载的图像是如何工作的

【解决方案3】：

我在这里看到至少两种方法：

使用第二张图片的负左边距

<img id="img"/><img id="mask"/>
<script>
mask.style.marginLeft = (imgW + maskW) / -2;
mask.style.marginTop = (imgH - maskH) / 2;
</script>

将图像显示为两个 div 的背景（一个嵌入另一个）。将它们的宽度和高度设置为相同的值（更大的图像）并使用内部背景的中心对齐。但是，如果您通过 AJAX 获取图像，您还应该检索图像的大小。

<div id="img">
    <div id="mask"></div>
</div>
<style>
#img {
    background-position: top left;
    background-repeat: no-repeat;
}
#mask {
    width: inherit;
    height: inherit;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<script>
var imgDiv = document.getElementsById('img'),
    maskDiv = document.getElementById('mask');
imgDiv.style.width = imgW + 'px'; // from AJAX
imgDiv.style.height = imgH + 'px';
imgDiv.style.backgroundImage = "url('img.jpg')"';
maskDiv.style.backgroundImage = "url('mask.jpg')";
</script>

这只是一个想法，应该可以修复

【讨论】：