我正在用 html 和 CSS 制作一个简单的网站，并且制作了一个 div 圆圈。当我调整浏览器大小时，它在一个方向上比另一个方向拉伸(stretch)得更多。有没有可能让它保持一个完美的圆圈？如果是，怎么办？
现在，这是圆的代码:
#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;
}
最佳答案
试试这个完整的例子:
<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>
关于html - 调整窗口大小时圆圈保持固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17199536/