高度为 100% 且宽度匹配的圆圈答案

【问题标题】：Circle with height 100% and matching width高度为 100% 且宽度匹配的圆圈
【发布时间】：2014-11-16 02:38:42
【问题描述】：

我需要的是一个高度为 100% 且宽度相匹配的圆圈，这样它就可以形成一个适当的圆形。

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

CSS：

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

脚本：

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

但这样做的目的是让圆圈像高度一样达到 100% 的屏幕宽度。

【问题讨论】：

至少向我们展示您的 html 结构或准备一个 jsfiddle.net。 SO 没有地方问你需要的东西，我们可以帮你写代码！
几个问题：什么是父 html 结构，您是否将 jquery 代码包装在文档就绪包装器中？
如果您需要代码，我会先在这里回答他们。我正在制作一个水平滚动页面，因此 .circle1 的父级 (.main) 的宽度为 400%（目前），高度为 100%。这个想法是多个彼此相邻的大圆圈。

标签： jquery css geometry aspect-ratio css-shapes

【解决方案1】：

为此创建了一个 JS Fiddle - 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/

【讨论】：

这确实是一个完美的圆形，但是当您调整浏览器的大小时，它会变成一个椭圆形。我需要它来保持一个完美的圆圈。如果那是可能的，否则我会顺其自然..
快到了！现在，当屏幕不是正方形时，它超过了 100% 的高度。但如果无法解决这个问题，我也可以解决这个问题。

【解决方案2】：

检查这是不是你想要的：

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

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

http://jsfiddle.net/dq505nk6/

【讨论】：

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

【解决方案3】：

您可以使用带有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%;
}

&lt;div&gt;&lt;img src="http://www.cofetariaonline.ro/images/transparent.png" alt=""&gt;&lt;/div&gt;

【讨论】：

这正是我们所需要的，但还有向其中添加内容的选项吗？抱歉，我对这一切还很陌生...
谢谢！我想我是从这里得到的

【解决方案4】：

你可以使用这个类来制作圆圈：

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

【讨论】：