圆与高度100％和匹配宽度

-2

我需要的是一个高度为100％和匹配的宽度，因此它使一个适当的圆形圆圈。圆与高度100％和匹配宽度

我需要一些使宽度等于高度的脚本。
我已经搜索，但迄今尚未成功。

的CSS：

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

脚本：

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

但这样做是使圆100％的屏幕宽度一样的高度。

来源

2014-09-22 Wijnand M

至少向我们展示你的HTML结构或准备jsfiddle.net。 SO是没有地方要求你需要的东西，我们可以用代码来帮助你！ – Alex 2014-09-22 07:38:23

增加了一些代码... – 2014-09-22 07:44:15

多数民众赞成在多数民众赞成在 – Alex 2014-09-22 07:44:53

你可以使用透明图像与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>

来源

2014-09-22 09:51:46

这正是需要但仍然有一个选项添加内容到它？对不起，我对这一切都很新... – 2014-09-22 10:09:47

@Wijnand是的，你可以看到这个小提琴：http://jsfiddle.net/webtiki/f06aho3r/2/ – 2014-09-22 10:47:34

谢谢！我想我从这里得到它 – 2014-09-22 11:24:05

创建一个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/

来源

2014-09-22 07:46:15

这个缩进形成了一个完美的圆圈，但是当您调整浏览器大小时，它将变成一个椭圆形。我需要它来保持一个完美的圆圈。如果这是可能的，否则我会只是滚动这个.. – 2014-09-22 07:55:36

添加新的版本 – 2014-09-22 07:59:41

几乎在那里！现在，当屏幕不是正方形时，它会超过100％的高度。但如果无法解决这个问题，我也可以用它来解决这个问题。 – 2014-09-22 08:07:31

检查，如果这是你想要什么：

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

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

http://jsfiddle.net/dq505nk6/

来源

2014-09-22 07:47:15

这非常接近预期的效果。只有在调整大小时它变成了一个椭圆形。有没有办法让它不断调整它的宽度到高度，而不是只在页面加载？ – 2014-09-22 08:00:36

对不起，但我不知道如何做到这一点只有在CSS ... – 2014-09-22 08:13:15

圆与高度100％和匹配宽度

回答

相关问题