为什么HTML的DIV会全部重叠在一起,HTML和JS中div的重叠问题

我想使用html和js在div内旋转图像。除了一个重叠的问题，我大部分工作：图像或者在旋转过程中覆盖了一切或者重叠。我以为我已经用我的js公式解决了它，它根据图像大小设置了div大小，但它不起作用，我不知道为什么。有任何想法吗？HTML和JS中div的重叠问题

#photoimg {

top: 0;

bottom: 0;

left: 0;

right: 0;

}

#photo {

position: relative;

}

document.getElementById('btn1').addEventListener('click', function(){

document.getElementById('photo').innerHTML = '';

//Get larger edge

var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2));

//Adjust container to fix image roted 90deg

document.getElementById('photo').offsetWidth(largerPhotoDimension);

document.getElementById('photo').offsetHeight(largerPhotoDimension);

});

rotate

document.getElementById('button').onclick = function(){

var curr_value = document.getElementById('photoimg').style.transform;

var new_value = "rotate(90deg)";

if(curr_value !== ""){

var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90;

new_value = "rotate(" + new_rotate + "deg)";

}

document.getElementById('photoimg').style.transform = new_value;

};

2015-04-21

Stevo

+0

当您使用不具有等边的图像它确实发生？如果是这样的话，那么我会建议在图像旋转时设置新的图片div的宽度和高度。 –

+0

我为你做了一个快速的codepen，似乎在我的浏览器(图像旋转在自己的div内)工作正常http://codepen.io/anon/pen/KpKzaO。我确实使用了方形图像 –

+0

@Burrito - 尝试一个矩形图像。它仍然有效，但我认为这是他面临的问题。 –