Aspect-Verhältnis Kreis in Quadrat div

Question

Ich versuche, so etwas wie dies in HTML/CSS zu machen: https://gyazo.com/6db0d2e3565414c10b65480c5d4b7526

Ich bin eine Bootstrap-Vorlage, die ich mit dieser Arbeit machen will. Mein Bestes versuchen, so weit ist das folgende Stück 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> 

Was mich ergibt dies: https://gyazo.com/dab11409ae41f9deb69418d10d74d2c5

Wie kann ich dies einen perfekten Kreis zu machen, egal, was die Längen der Seiten des äußeren div sind?

bearbeiten

Das Problem ist, dass die Breite und Höhe der äußeren td zur Laufzeit durch Javascript von meiner Vorlage berechnet werden. Manchmal ist es 20px, manchmal 50px, abhängig vom Benutzerbildschirm. Ich brauche einen Kreis, der immer kreisförmig bleibt (unter Beibehaltung des Seitenverhältnisses), unabhängig von den Abmessungen des td.

Edit # 2

dachte ich, dies mit CSS möglich sein würde, aber es scheint nicht zu sein. Dank Bagzli Antwort habe ich es einfach, den folgenden Ausschnitt mit:

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

Answer 1

Also, was Sie fordern, denn ich nur mit CSS möglich nicht glauben (wenn Sie es wollen, die auf halten) Um das zu tun, dass Sie so etwas wie unten benötigen:

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

Wie funktioniert das:

Der Kreis bleibt perfekt, solange die Breite kleiner als die Höhe ist. Das JavaScript kommt nur dann zum Einsatz, wenn die Breite größer als die Höhe ist, und legt dann die Breite des untergeordneten Elements auf die Höhe des Elements fest.

Sie können das Javascript aktualisieren, um es auf die Größe zu ändern, wenn dies ein responsives Element sein soll. Wie auch immer, oben wird es der Fall sein, wenn Sie die Größe des Wrappers nicht kennen.

Answer 2

Ihr Code zu kurz scheint Ihr Problem zu reproduzieren, sondern ein Quadrat zu zeichnen, können Sie eine Pseudo verwenden können die heighth des Behälters einzustellen:

für 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>

viele andere Fragen gleichermaßen: https://stackoverflow.com/search?q=[css]+ratio Sobald Sie verstehen, wie das funktioniert, werden sie viele Duplikate sein;) auf Ihre Frage. nimm eins auf!

Answer 3

Hier ist ein Artikel auf, wie Höhe in Bezug auf Breite einzustellen: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

So zu tun, was Sie wollen Sie so etwas wie dieser https://jsfiddle.net/njqr9nje/

HTML tun könnten:

<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%; 
} 

Und Sie können chan ge des Seitenverhältnisses, indem Sie den padding-top-Wert bearbeiten.