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