gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 12:48:24 25 4
gpt4 key购买 nike

我正在用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com