How to align 2 images by their centre using JavaScripts

Question

I have 2 images, one of them has a Mask area. And the other image can be seen through the Masked area of the above image. I want to centre the second image within the Mask area of the first image.

Currently I'm do scale the image to mach with the mask area using below function (It has 3 lines of code that I tried to with alignment - didnt work though),

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'; */

}

Current and Expected result as an Illustration. IMAGE 1 has a Mask area that can see through, and IMAGE 2 is behind IMAGE 1, but align its top left to the Mask Area's Top left. What I want is, IMAGE 2 centre = Mask Area Centre

I tried few things and didn't get any of them quite right, any feedback would be really helpful

Answer 1

If I understand correctly from your code. You want to resize image to fix into your mask. I have write a demo using your function here . Because I dont know your real HTML, I use my own code with a predefined value of maskW and maskH .

Another thing to note: you should set the position property of the image style to another value than the default static value if you want to layout it manually. In the demo, I set the position value of img element to absolute .

Answer 2

There is a css solution for this if you'd like to try:

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

Answer 3

I see at least two approaches here:

• use negative left margin of second image

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

• show images as background of two divs (one embeds another). Set their width and height same values (of bigger image) and use center alignment of inner background. But then, if you're getting images by AJAX, you should retrieve also sizes of the images.

   <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> 

This is juts an idea and should work with fixes