Question

我正在制作一个带有html和CSS的简单网站，我已经创建了一个div圈。当我调整浏览器大小时，它在一个方向上比另一个方向拉伸得更多。是否有可能让它保持完美的圆圈？如果是这样，怎么样？

现在，这是圆圈的代码：

#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 60%;
height: 60%;
max-width: 70%;
max-height: 70%;
min-width: 30%;
min-height: 30%;
display: block;
position: fixed;
text-align: center;
}

Answer 1

您可以手动设置div的高度和宽度，如：

<html>
<style>
.circle {
        height: 20px;
        width: 20px;
        background: red;
        border-radius: 100%;
}
</style>
<body><div class="circle"></div></body>
</html>

Answer 2

试试这个完整的例子：

<html>

    <head>

        <style>
        #circle
            {
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            background-color: #B64926;
            height: 60%;
            max-height: 70%;
            min-height: 30%;
            display: block;
            position: fixed;
            text-align: center;
            }
        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {    
                $(window).resize(
                    function(){                 
                        $('#circle').width($('#circle').height());
                    }
                );

                $(window).resize();

            });
        </script>

    </head>

    <body>

        <div id="circle"></div>

    </body>

</html>

调整窗口大小时保持固定的圆圈

2 个答案: