How to make a circular image? - css

Question

The problem is this image, I want to make it circular, I used border-radius:50% and set equal height and width. I searched for the question and found this one How to make a circular image in css and I tried to make something similar but I used flexbox.
<div className='nav-bar'>
<ul className='nav-links'>
<li className='nav-link'>
<Link >
Home
</Link>
</li>
<li className='nav-link'>
<Link >
Add question
</Link>
</li>
<li className='nav-link'>
<Link >
Leaderboard
</Link>
</li>
</ul>
<ul className='nav-user-sign-out'>
<li className='nav-item'>
<p>Welcome, </p>
</li>
<li className='nav-item'>
<div className='avatar'>
<img src={} alt='' />
</div>
</li>
<li className='nav-item'>
<button className='sign-out'>
Sign out
</button>
</li>
</ul>
</div>;
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
}
Link {
padding: 10px;
}
.nav-user-sign-out {
display: flex;
align-items: center;
justify-content: space-around;
}
.sign-out {
padding: 10px;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
}
img {
height: 100%;
width: 100%;
}

Answer 1

Either make height and width of fixed and equal value or if you are using percentage confirm to that image has same width and height.

Answer 2

I just made a codesandbox with your code, and it's working without an issue, maybe the issue is with another CSS class that declared somewhere else, or maybe the object-fit property on the image. I'll put the link to my sandbox here, feel free to go ahead and try it with your code. I added object-fit to the image styles there.
working example

Answer 3

.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-links {
display: flex;
}
Link {
padding: 10px;
}
.nav-user-sign-out {
display: flex;
align-items: center;
justify-content: space-around;
}
.sign-out {
padding: 10px;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
}
img {
height: 100px;
width: 105px;
border-radius: 50%;
}
<div className='nav-bar'>
<ul className='nav-links'>
<li className='nav-link'>
<Link >
Home
</Link>
</li>
<li className='nav-link'>
<Link >
Add question
</Link>
</li>
<li className='nav-link'>
<Link >
Leaderboard
</Link>
</li>
</ul>
<ul className='nav-user-sign-out'>
<li className='nav-item'>
<p>Welcome, </p>
</li>
<li className='nav-item'>
<div className='avatar'>
<img src="https://media.sproutsocial.com/uploads/2015/02/Facebook_Embed.png" alt=''width ="200" />
</div>
</li>
<li className='nav-item'>
<button className='sign-out'>
Sign out
</button>
</li>
</ul>
</div>