4

我想制作一个圆形按钮(div 也可以)并将其放在中心,直径为窗口高度的 20%。我可以这样做,但如果窗口不完全是方形的,按钮将变为椭圆形(我希望宽度和高度相同 - 一个完美的圆形)。

.circle {
  height: 20%;
  width: 20%;
  border-radius: 100%;
  font-size: 20px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  background: #000
}

对像素值进行硬编码并不是一个很好的选择,因为它不会根据窗口调整大小。有任何想法吗?

4

3 回答 3

5

有两种方法可以实现这一目标;有和没有 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;
}
于 2012-09-18T14:29:42.740 回答
3

有一种方法可以在不使用任何 JS 的情况下实现完美的圆,它在于填充百分比的规范定义。当填充作为百分比应用时,它作为对象宽度的百分比应用,这意味着如果您将宽度和高度设置为 0,并为对象提供 20% 的填充,您最终会得到一个占 20% 的圆圈的可用宽度。不过,您需要发挥创造力才能使事情进入圈子。

<style>
    html, body {
        width:80%;
    }
    .square
    {
        width:0%;
        height:0%;
        padding:20%;
        position:relative;
        left:25%;/*Position central*/
        border-radius:100%;
        margin:auto;/*Position central*/
        border:1px solid #000000;   
    }
</style>
于 2012-09-18T14:38:44.550 回答
0

最简单的解决方法是向具有相同值的圆圈添加min-height和属性。min-width

.circle {
  min-width: 100px;
  min-height: 100px;
}
于 2021-03-06T18:49:56.620 回答