1

我正在用 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;
}
4

2 回答 2

0

试试这个完整的例子：

<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>
于 2013-06-19T21:24:01.770 回答
-1

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

<html>
<style>
.circle {
        height: 20px;
        width: 20px;
        background: red;
        border-radius: 100%;
}
</style>
<body><div class="circle"></div></body>
</html>
于 2013-06-19T19:24:05.280 回答