How to make a circular image?-CodePudding

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%;
}

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

.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>