Сделайте идеальный круг вокруг девта с переменной высотой ⇐ Jquery

[Anonymous]

Я просмотрел это немало, но, кажется, не могу найти хороший, солидный ответ, чтобы найти, как сделать отзывчивый круг вокруг элемента div переменной высоты.

Код: Выделить всё

Тем не менее, я собираюсь использовать минимальную высоту элемента и иметь круг вокруг этого Div.
Другой способ создания адаптивного круга-использовать что-то вроде фрагмента ниже, но я снова не могу адаптировать это для работы для переменной (опять же, я не могу использовать vh , как дивизион, будет меняться по высоте. class = "Snippet">

Код: Выделить всё

.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}

.square:after {
content: "";
display: block;
padding-bottom: 100%;
}

.content {
position: absolute;
width: 100%;
height: 100%;
}< /code>



< /code>
< /div>
< /div>
< /p>
Я пытаюсь создать что -то вроде ниже, где круг никогда не будет разрезать в углах Div (с примерно 10px Padding). Я лично пытался избежать JavaScript и предпочел бы только подход CSS, но это кажется неизбежным. Может быть, единственное решение состоит в том, чтобы использовать jQuery для расчета высоты элемента, чтобы применить это к элементу обертки? class = "Snippet">

.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}

.content {
width: 300px;
min-height: 100px;
background: tomato;
}< /code>


Hello!

This has a variable height but fixed width

Hello

Подробнее здесь: https://stackoverflow.com/questions/629 ... ble-height