Image zoom in and out with respect to the centre of div not working

Question

I have an image zoom property in one of my website.I want to zoom an image with respect to the centre of the div.

<div class="img"><img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>

<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">

And the zoom funcction is as follows.

function zoom(zm) 
{
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
}

I want to zoom the image with respect to the centre. Thanks in advance.

score 0 · Answer 1 · answered Mar 07 '14 at 06:52

How about this http://jsfiddle.net/sajith/J6Y3X/

JS

function zoom(zm) {
    img = document.getElementById("pic")
    wid = img.width
    ht = img.height
    img.style.width = (wid * zm) + "px"
    img.style.height = (ht * zm) + "px"
    img.style.marginLeft = "-" + (wid * zm)/2 + "px"
    img.style.marginTop = "-" + (ht * zm)/2 + "px"
}

CSS

.img {
    width:450px;
    height:450px;
}
#pic {
    position: absolute;
    left: 225px;
    top: 225px;
    margin: -225px 0 0 -225px;
}

HTML

<div class="img"><img id="pic" src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>

<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">

Image zoom in and out with respect to the centre of div not working

1 Answers1