Question

我需要的是一个高度为100％且匹配宽度的圆圈，因此它会形成一个合适的圆圈。

我需要一些使宽度等于高度的脚本我已经搜索过但到目前为止还没有成功。

CSS ：

.circle1 {
    height: 100%;
    background-color: #FF0000;
    border-radius: 50%;
}

剧本：

var cw = $('.circle1').width();
    $('.circle1').css({
    'height': cw + 'px'
});

但这样做可以使圆圈的宽度与高度一样100％。

Answer 1

您只需使用带有height:100%; width:auto;的透明图像的CSS即可实现此目的。在下面的演示中，我使用了随机透明.png 11px * 11px但你可以使用1 * 1px。

圆圈响应它的容器高度：

<强> DEMO

＆＃13;

body,html{
    height:100%;
    margin:0;
}
img{
    height:100%;
    width:auto;
    border-radius:50%;
    background:teal;
    display:block;
}
div{
    height:100%;
}

＆＃13;

<div><img src="http://www.cofetariaonline.ro/images/transparent.png" alt=""></div>

＆＃13;

Answer 2

为此创建了一个JS小提琴 - http://jsfiddle.net/h0gs54yv/1/

在HTML中 -

<div class="circle"></div>

在CSS中 -

html {
    height:100%;
}
body {
    height:100%;
}
.circle {
    height:100%;
    width:100%;
    border-radius:50%;
    background-color:#f00;
}

一个小jQuery可以在浏览器调整大小时保持它的形状：）

http://jsfiddle.net/h0gs54yv/2/

Answer 3

检查这是否是您想要的：

css:
.circle1
{
    background-color: red;
    width: 100%;
    border-radius: 100%;
}

Javascript:
$(".circle1").height($(".circle1").width());

http://jsfiddle.net/dq505nk6/

Answer 4

您可以使用此类制作圈子：

.circle {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
}

圆形，高度100％，宽度匹配

4 个答案: