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

これを実現するには2つの方法があります。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、要素の親のに関連して計算されるという事実を使用する必要があります。小さなデモ：小さなリンク。widthheight

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 に答える