Despite my extensive research, I have yet to come across a satisfactory solution for creating a responsive circle that adapts to a div element of variable height.
While it is relatively simple to create a responsive circle using vw units, my challenge lies in achieving the same result when the div has a fluctuating height.
<div style="height:20vw; width:20vw"></div>A different approach involves the use of CSS properties like in the following code snippet, but I still face difficulty in adjusting it to accommodate variable heights without the use of vh units.
.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%;
}<div class="square">
<div class="content">
</div>
</div>My goal is to achieve a design similar to the image below, where the circular shape maintains a consistent padding around the div, ensuring it never overlaps with the corners.
https://i.sstatic.net/yVEhX.png
My experimentation led me to the following CSS code snippet, where I attempted to center the circle within the element and provide it with a minimum height, but I encountered limitations due to the fixed width.
.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;
}<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>