如何通过设置相等的宽度和高度来获得一个圆

Question

need to set height of an element equal to its width

ie - to get a perfect circle

here is the try and console shows equal values but the resulting height is obviously much higher then the width

 $('button').on('click', function(){ let box = $('#box'); let w = box.width(); console.log(w); box.height(w); let h = box.height(); console.log(h); });

 .box{background:orange; width:30%; border-radius:50%; overflow:hidden;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>CLICK</button> <br><br> <div class='box' id='box'> lorem ipsum<br> lorem ipsum<br> lorem ipsum<br> lorem ipsum<br> lorem ipsum<br> </div> <br><br>

Answer 1

You could get the of width and height and assign to ot the minimum of both.

 $('button').on('click', function(){ let box = $('#box'); let l = Math.min(box.width(), box.height()); box.height(l); box.width(l); });

 .box{background:orange; width:30%; border-radius:50%; overflow:hidden;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>CLICK</button> <br><br> <div class='box' id='box'> lorem ipsum<br> lorem ipsum<br> lorem ipsum<br> lorem ipsum<br> lorem ipsum<br> </div> <br><br>