jquery - 高度为 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

您可以仅使用 CSS 使用带有 height:100%; 的透明图像来实现此目的宽度:自动；。在下面的演示中，我使用了一个随机的透明 .png 11px*11px，但你可以使用 on with 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>