1

我用 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>
4

1 回答 1

2

您的问题来自图像默认为内联显示而不是块的事实。这意味着图像会继承字母和单词的属性（字体大小和行高）。您看到的差异（在这个小提琴中说明）可以通过简单地应用以下display:block规则来纠正

#facediv img {
    display:block;
}

演示

我应该早点注意到：P

编辑：出于病态的好奇心，我将图像仍然作为内联元素进行了等效设置，将行高和字体大小设置为 0px。在这个演示中看到它的工作

于 2013-07-01T21:21:37.340 回答