CODEWITHSUNDEEP
htmlcss
holland
holland

Reputation: 2182

Aspect-ratio circle inside square div

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>

Upvotes: 0

Views: 2485

Answers (3)

Bagzli
Bagzli

Reputation: 6597

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.

Upvotes: 1

Mogzol
Mogzol

Reputation: 1405

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.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106078

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 !

Upvotes: 0

Related Questions