如何用html和js修复旋转图像重叠？

Question

我正在尝试加载和旋转div内部的图像，到目前为止一直很好（https://jsfiddle.net/ab5jkybL/），除了pic在旋转时与周围区域重叠。更具体地说，它是在我使用Google徽标图片时执行此操作的。根据图像类型和大小，它似乎有不同的行为。在任何一种情况下，除非图像很小，否则它会从屏幕的一侧切掉或重叠周围的页面区域。

我找到了一些想法来解决这个问题（我目前正在尝试限制div和img限制的大小，但我似乎无法让它正常工作），但我需要一些可以工作的东西所有浏览器，最好回到IE6，因为我遵循渐进增强的规则。然而，也欢迎更多现代的想法（例如任何适用于IE8及以上的东西）。我需要限制div内部的图片大小，以便它可以旋转而不会超出限制区域。有什么想法吗？

    <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" />';
        });
    </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>

Answer 1

如果您根据要重新加载的图片设置div尺寸怎么办？旋转时，不会有任何重叠。

https://jsfiddle.net/chillichief/ab5jkybL/2/

<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($("#photoimg").width() , 2) + Math.pow($("#photoimg").height() ,2) );

    //Adjust container to fit rotated image
    $("#photo").width(largerPhotoDimension);
    $("#photo").height(largerPhotoDimension);    

            });
        </script>

感谢chillichief指出我糟糕的初始数学： - ）