Aspect-ratio circle inside square div

Question

I'm trying to make something like this in HTML/CSS: https://gyazo.com/6db0d2e3565414c10b65480c5d4b7526

I'm using a bootstrap template which I want to make this work with. My best try so far is the following piece of code:

<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>

Which gives me this: https://gyazo.com/dab11409ae41f9deb69418d10d74d2c5

How can I make this a perfect circle, no matter what the lengths of the sides of the outer div are?

Edit

The problem is that the width and height of the outer td gets calculated at run-time by javascript by my template. Sometimes its 20px, other times its 50px for example, depending on the users screen. I need to have a circle, that always stays circular (maintaining aspect-ratio) no matter what the dimensions of the td are.

Edit #2

I figured this would be possible with css but it doesn't seem to be. Thanks to Bagzli's answer I made it simple using the following snippet:

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

Possible duplicate question, http://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image — fdfey, Apr 28 '16 at 17:47
Not really @fdfey, that question is about "how to make a circular div" which I already know how to do. The problem is with the aspect ratio — Markinson, Apr 28 '16 at 17:50

score 1 · Accepted Answer · answered Apr 28 '16 at 18:21

So what you are asking for I do not believe possible with CSS only (if you want it to maintain responsive) In order to do that you will need something like below:

<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/

How does this works:

The circle will stay perfect as long as the width is less than the height. The javascript comes in only when width is more than the height, and then what it does it sets the width of the child to be the height of the element.

You can update the javascript to make it on resize if this is meant to be a responsive element. Anyhow, above will do the trick when you don't know the size of the wrapper div.

Finally someone who doesn't just tell me "how to make a circle"! You're great, thanks a lot for this answer — Markinson, Apr 28 '16 at 18:25
?? really, 3 containers and javascript needed for this ? oups, maybe the CSS tag should be removed here ;) — G-Cyrillus, Apr 28 '16 at 18:52
Well, at least that was something that made it work for me. His answer gave me an answer posted in a edit above. — Markinson, Apr 28 '16 at 19:05
I prefer to avoid use of javascript wherever possible, my css solution with 3 div tags works and is responsive, the problem is the width, so I solved that with a bit of javascript. Yes you can do this with less html and css but a lot more javascript. Many ways to accomplish this. — Bagzli, Apr 28 '16 at 19:24

score 0 · Answer 2 · edited May 23 '17 at 12:23

Your code seems too short to reproduce your problem but to draw a square, you can use a pseudo to set the heighth of the container:

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

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 */
}

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

     <div style="background-color:green;
                 border-radius: 100%;
                 width:auto;
                 height:100%;">
     </div>
</td>
  </tr>
</table>

plenty other questions alike : https://stackoverflow.com/search?q=[css]+ratio Once you understand how this works they'll be many duplicate ;) to your question . pick one up !

Mogzol · Answer 3 · 2016-04-28T18:06:43.917

Here is an article on how to set height relative to width: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

So to accomplish what you want you could do something like this 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%;
}

And you can change the aspect ration by editing the padding-top value.

Aspect-ratio circle inside square div

3 Answers3