有两种方法可以实现这一目标;有和没有 JavaScript。
JavaScript 方法
这是一个简单的演示:小链接。
HTML:
<div class = "circle"></div>
CSS:
html, body {
height: 100%;
}
.circle {
border-radius: 1000px;
background-color: rgb(0, 162, 232);
}
JavaScript(使用 jQuery,但不是必需的):
function upd() {
var h = $("body").height();
$(".circle").height(h / 5);
$(".circle").width(h / 5);
}
upd();
window.onresize = upd;
非 JavaScript (CSS) 方法
对于纯 CSS 解决方案,您需要使用所有padding
值都是相对于元素 parent 计算的事实width
,而不是height
( reference )。小演示:小链接。
HTML:
<div class = "wrapper">
<div class = "main">
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.wrapper {
width: 20%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 100%; /*1:1 ratio*/
display: block;
content: '';
}
.main {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
border-radius: 1000px;
background-color: rgb(0, 162, 232);
/*I wanted it to look good :)*/
font-family: 'Arial', Helvetica, Sans-Serif;
color: white;
}