CODEWITHSUNDEEP
javascripthtmlcss
user3449520
user3449520

Reputation: 11

how to center the image in a div when using transform scale

I am making some functions in JavaScript for zoom in and zoom out with transform scale. The functions work very well.The problem is that the zoomed image move down on zoom out and up on zoom in. I want to keep it to the center of the div.

JSFiddle

HTML:

<div  class="skew"><img id="blah" align="middle" style="margin:0 auto 0 auto;"src="http://3rdbillion.net/wp-content/uploads/2013/11/a24cc9de0c523a5bf7680e18af1952853.jpg"/></div>

<div id="zoom">
    <button type="button" value="zoom in" id="in" onclick="zoomin()" style=" width:80px;height: 25px;">Zoom In</button><br>
    <button type="button" value="zoom out" onclick="zoomout()" id="out"style="height: 25px;" >Zoom Out</button>
</div>

CSS:

.skew {
    display: inline-block;
    height: 120px;
    width: 360px;
    margin-top: 100px;
    overflow: hidden;
}

JS:

function zoomin()
{
    document.getElementById('blah').style.transform = "scale(2,2)";
    document.getElementById('blah').style.webkitTransform = "scale(2,2) ";
    document.getElementById('blah').style.msTransform = "scale(2,2)";
}   


function zoomout()
{
    document.getElementById('blah').style.transform = "scale(0.5,0.5) ";
    document.getElementById('blah').style.webkitTransform = "scale(0.5,0.5)";
    document.getElementById('blah').style.msTransform = "scale(0.5,0.5)";
}

Upvotes: 0

Views: 462

Answers (1)

TimSPQR
TimSPQR

Reputation: 2984

How about this - FIDDLE.

HTML

<div  class="skew">
    <img id="blah" src="http://3rdbillion.net/wp-content/uploads/2013/11/a24cc9de0c523a5bf7680e18af1952853.jpg"/>
</div>
<br />
<button type="button" value='' id="in">Zoom In</button>
<br />
<button type="button" value="" id="out">Zoom Out</button>

CSS

.skew {
  height: 120px;
  width: 360px;
  margin-top: 100px;
  overflow: hidden;
}
img {
    height: 120px;
    width: 360px;
    margin: 0px auto;
}
button {
    width: 100px;
    height: 25px;
}

JS

$('#in').on('click', function(){
  $('#blah').css("transform", "scale(2, 2)");
                                });

$('#out').on('click', function(){
  $('#blah').css("transform", "scale(0.5, 0.5)");
});

Upvotes: 1

Related Questions