как получить круг, установив равные ширину и высоту

Question

нужно установить height элемента равным width

, т. Е. - чтобы получить идеальный круг

здесь - попытка и консоль показывает одинаковые значения, но в результате height это очевидно намного выше, чем 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

Вы можете получить значения width и height и назначить минимум обоих.

$('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>