Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I am facing an issue where the circle becomes larger than the navigation bar when the width:height ratio of the screen increases. What would be the best approach to ensure that this design is responsive across all screens? You can view my code snippet here: https://jsfiddle.net/n386ejzf/
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.chats{
height: 20%;
width: 100%;
background: red;
}
.chat{
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img{
width: 10%;
padding-bottom: 10%;
background: blue;
border-radius: 50%;
} <div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>