Question

我正在尝试在HTML / CSS中制作类似的内容：https://gyazo.com/6db0d2e3565414c10b65480c5d4b7526

我正在使用我想要使用的引导程序模板。到目前为止，我最好的尝试是以下代码：

<td class="tablerow mdl-data-table__cell--non-numeric" 
style="background-color:red;padding:0 !important">

     <div class="circlediv" style="background-color:green;
                            border-radius: 100%;                 
                            height:100%;">
     </div>
</td>

这给了我这个：https://gyazo.com/dab11409ae41f9deb69418d10d74d2c5

无论外部div的长度是多少，我怎样才能使它成为一个完美的圆圈？

修改

问题是外部td的宽度和高度是由我的模板通过javascript在运行时计算的。有时是20px，有时是50px，具体取决于用户屏幕。我需要有一个圆圈，无论td的尺寸是多少，它都始终保持圆形（保持纵横比）。

编辑＃2

我认为这可能与css有关，但似乎不是。感谢Bagzli的回答，我使用以下代码片段简单了：

<script type="text/javascript">
     $('.circlediv').width($('.circlediv').height())
 </script>

Answer 1

所以你要求的我不相信只有CSS（如果你想让它保持响应）为了做到这一点你需要如下所示：

<div id="wrapper" class="visible-square">
  <div id="square" class="square">
    <div class="content">
    </div>
  </div>
</div>
.visible-square{
  border: 1px solid #000;
  width: 300px;
  height: 200px;
}

.square {
  position: relative;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  background: red;
}

$(document).ready(function(){
    var width = $("#wrapper").width();
  var height = $("#wrapper").height();
  if(width > height){
    $("#square").width(height);
  }
});

https://jsfiddle.net/qn21dvom/

这是如何运作的：

只要宽度小于高度，圆圈就会保持完美。只有当宽度大于高度时，javascript才会出现，然后它会将它的宽度设置为元素的高度。

如果这是一个响应元素，您可以更新javascript以使其调整大小。无论如何，当你不知道包装div的大小时，上面会做的伎俩。

Answer 2

您的代码似乎太短而无法重现您的问题但是为了绘制正方形，您可以使用伪来设置容器的高度：

for infos https://www.w3.org/TR/CSS2/box.html#padding-properties

＆＃13;

table {
  width:10%;/* wee need some width to start with ... or content */
}
div:before {
  content:'';
  padding-top:100%;/* % vertical margin or padding refers to width */
  display:block;/* or else but not inline */
}

＆＃13;

其他很多问题：https://stackoverflow.com/search?q=[css]+ratio一旦你理解了它是如何工作的，那么它们会有很多重复;）你的问题。选一个！

Answer 3

以下是有关如何设置相对于宽度的高度的文章：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

所以要完成你想要的东西，你可以做这样的事情https://jsfiddle.net/njqr9nje/

HTML：

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

CSS：

.outer {
  width: 300px;
  height: 150px;
  border: 1px solid black;
}

.circle {
  background-color:green;
  border-radius: 50%;
  width:50%;
  margin: auto;
}
.circle:before{
    content: "";
    display: block;
    padding-top: 100%;
}

您可以通过编辑填充顶部值来更改宽高比。

方形div内的宽高比圈

3 个答案: