如何在缩放时居中显示图像？

Question

因此我需要在放大后将图像居中，我不能使用任何Jquerys
现在它全部放大向右移动和覆盖，但最右边的图像在浏览器屏幕的末尾被切断

<script>
var target;     //global container for currently clicked div
var timer;
var tick = 40;
var diffw = 341;
var diffh = 235;
var trans = 0.5; //opacity 
var zoomed = false; //boolean, can only be true or false


function startAnimation(divname) {
    target = divname; 
    if (zoomed==false)  {
        timer = setInterval("zoomPhotoIn()",tick); 
    }else {
        timer = setInterval("zoomPhotoOut()",tick); 

    }
}

function zoomPhotoIn()  {
    trans += 0.02;
    diffw += 15;
    diffh += 10;

    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 5;

    if(diffw >= 700)    {
        clearInterval(timer);
        zoomed = true;
    }
}

function zoomPhotoOut() {
    trans -= 0.02;
    diffw -= 15;
    diffh -= 10;

    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 1;

    if(diffw <= 341)    {
        clearInterval(timer);
        zoomed = false;
    }

}

</script>

Answer 1

这基本上是@Shmiddty在回答表中的评论。

这些修改假设图片的position不是静态的，并且有top:50%和left:50%：

<script>
var target;     //global container for currently clicked div
var timer;
var tick = 40;
var diffw = 341;
var diffh = 235;
var trans = 0.5; //opacity 
var zoomed = false; //boolean, can only be true or false


function startAnimation(divname) {
    target = divname; 
    if (zoomed==false)  {
        timer = setInterval("zoomPhotoIn()",tick); 
    }else {
        timer = setInterval("zoomPhotoOut()",tick); 

    }
}

function zoomPhotoIn()  {
    trans += 0.02;
    diffw += 15;
    diffh += 10;

    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 5;
    document.getElementById(target).style.marginLeft = (diffw/2) + "px";
    document.getElementById(target).style.marginTop = (diffh/2) + "px";

    if(diffw >= 700)    {
        clearInterval(timer);
        zoomed = true;
    }
}

function zoomPhotoOut() {
    trans -= 0.02;
    diffw -= 15;
    diffh -= 10;

    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 1;
    document.getElementById(target).style.marginLeft = (diffw/2) + "px";
    document.getElementById(target).style.marginTop = (diffh/2) + "px";

    if(diffw <= 341)    {
        clearInterval(timer);
        zoomed = false;
    }

}

</script>