Question

我正在尝试使用html和js在div中旋转图像。除了重叠的问题之外，我大部分时间都在工作：图像要么在旋转期间覆盖所有内容或重叠。我以为我已经用我的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>

Answer 1

只需添加这两行

即可

    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;

Answer 2

谢谢你们。我使用以下代码解决了这个问题。

<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>

在HTML和JS中使用div重叠问题

2 个答案: