javascript - 使用变换比例时如何使图像在 div 中居中

Question

我正在用 JavaScript 编写一些函数，用于使用变换比例进行放大和缩小。这些功能运行良好。问题是缩放后的图像在缩小时向下移动，在放大时向上移动。我想将它保持在 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)";
}

Answer 1

这个怎么样 - 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)");
});