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

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

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

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

Answer 2

检查这是否是你想要的：

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

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

http://jsfiddle.net/dq505nk6/

Answer 3

为此创建了一个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 4

您可以使用此课程制作圈子：

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