我用javascript写了一个简单的网页,它试图在单击后随着时间的推移从页面中心缩放一个元素。对于我测试过的svg元素,它工作正常。

但是,当我使用图像时,它从div外部(居中)开始,并随着它变大而逐渐收敛,然后将其居中对齐。
我能找到的唯一结果与溢出设置有关,但是即使将溢出设置为隐藏,图像仍在div之外并且可见。 div是要调整大小的第一件事,因此它对于图像来说总是足够大的。

可能是因为我正在使用较小的值,还是我的代码有问题?

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
     margin:0;
    }
    #maindiv {
     position:absolute;
     background-color:#141414;
     width:100%;
     height:100%;
     overflow: hidden;
    }
    #face {
    width:109px;
    /* height: auto !important;  */
    }
    #facediv {
     position: absolute;
     top: 50%;
     left: 50%;
     }
    </style>

    <script>

    function sizeUpdate (elem){
        var sf = 1

        function frame(){

            sf++                                                                <!-- increment scale factor
            var fwidth = 0.1;
            var scaledwidthface = (fwidth * sf);                                <!-- scaled width - width-constant*scale-factor
            var face_var =document.getElementById("face");
            var facediv_var = document.getElementById("facediv");
            facediv_var.style.width = ""+scaledwidthface+"px";                  <!-- set containing div to same width as object
            facediv_var.style.marginLeft = ""+(-1 * scaledwidthface/2 )+"px";   <!-- set the container div to x-offset half object-width (centres horizontally)
            face_var.style.width = ""+scaledwidthface+"px";                     <!-- set width of object
            var face_ht = face_var.clientHeight;                                <!-- get integer-form of object height (?)
            facediv_var.style.height = ""+face_ht+"px";                         <!-- set container div to same height as object
            facediv_var.style.marginTop = ""+(-1*face_ht/2)+"px";               <!--set container div y-offset half object-height (centres vertically)

            if (sf == 500)
                clearInterval(id)                                               <!--stop when incr reaches this maximum
        }

        var id = setInterval(frame, 50)

    }
    </script>
 </head>


    <body>
        <div id="maindiv" onclick="sizeUpdate(this.children[0])">
            <div id="facediv">
                <img id="face" src="http://goo.gl/6xLiC">
            </div>
        </div>
    </body>
</html>

最佳答案

您的问题来自图像默认为行内显示而不是阻止的事实。这意味着图像具有字母和单词的属性(字体大小和行高)。只需应用以下display:block规则即可纠正您看到的差异(在this fiddle中说明)

#facediv img {
    display:block;
}


Demo

我应该早点注意到:P

编辑:出于病态的好奇心,我将图像的等效内容用作行内元素,将行高和字体大小设置为0px。看到它在this demo中工作

关于javascript - 使用Javascript设置尺寸动画时,div中的图像对齐异常,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17413491/

10-12 04:46
查看更多