HTML和JS中div的重叠问题

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

<html> 
<head> 
     <style> 
      #photoimg { 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      } 
      #photo { 
      position: relative; 
      } 
     </style> 
    </head> 
    <body> 
     <form action="#" method="post"> 
     <input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br> 
     <input type="button" value="Show Image" id="btn1"/> 
     </form> 
      <div id="photo"></div> 
      <script> 
       document.getElementById('btn1').addEventListener('click', function(){ 
        document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>'; 
        //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);  
       }); 
      </script> 
      <button id="button">rotate</button> 
     <script> 
      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; 
      }; 
     </script> 
     </body> 
</html>

来源

2015-04-21 Stevo

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

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

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

谢谢大家。我使用下面的代码修复了这个问题。

<html> 
    <head> 
     <style> 
      #photoimg { 
       top: 0; 
       bottom: 0; 
       left: 0; 
       right: 0; 
      } 
      #photo { 
       position: relative; 
      } 
     </style> 
     </head> 
<form action="#" method="post"> 
    <input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br> 
    <input type="button" value="Show Image" id="btn1"/> 
    </form> 
     <div id="photo"></div> 
     <script> 
      document.getElementById('btn1').addEventListener('click', function(){ 
       document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>'; 
       //Get larger edge 
       var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2)); 
       var marginVert = (largerPhotoDimension - document.getElementById('photoimg').offsetHeight)/2; 
       var marginHorz = (largerPhotoDimension - document.getElementById('photoimg').offsetWidth)/2; 
       //Adjust container to fix image rotated 90deg 
       document.getElementById('photo').style.marginRight = marginHorz; 
       document.getElementById('photo').style.marginLeft = marginHorz; 
       document.getElementById('photo').style.marginBottom = marginVert; 
       document.getElementById('photo').style.marginTop = marginVert;     
      }); 
     </script> 
     <button id="button">rotate</button> 
    <script> 
     document.getElementById('button').onclick = function(){ 
      var curr_value = document.getElementById('photoimg').style.transform; 
      var new_value = "rotate(45deg)"; 
      if(curr_value !== ""){ 
       var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 45; 
       new_value = "rotate(" + new_rotate + "deg)"; 
      } 
      document.getElementById('photoimg').style.transform = new_value; 
     }; 
    </script> 
    </body> 
</html>

来源

2015-04-22 00:19:46 Stevo

只需添加这两条线

document.getElementById('photoimg').style.height = document.getElementById("photo").offsetWidth; 
    document.getElementById('photoimg').style.width = document.getElementById('photo').offsetHeight;

下面

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

来源

2015-04-22 00:27:12 CommonKnowledge

@Stevo看起来好像你懂了。我应该刚刚发布答案而不是评论，durn。祝你好运！ – CommonKnowledge

HTML和JS中div的重叠问题

回答

相关问题