flex布局导航栏中设置border-radius:50%无法实现圆形图片怎么解决？

我遇到的问题是上图中的图片，我想要将其设置为圆形样式，已经使用了border-radius:50%属性并设置了相等的宽高。我搜索相关问题时找到了将CSS图片设置为圆形的方案，尝试按照类似方法实现，不过我的页面使用了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%;
}

你的问题由两个原因导致：一是flex布局的默认收缩规则会在父容器空间不足时压缩.avatar容器的宽高，导致无法保持正圆；二是img没有设置填充规则，可能出现拉伸变形。
按如下修改CSS即可修复：

.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;
    gap: 12px; /* 可自行调整元素间距 */
}
.sign-out {
    padding: 10px;
}
.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0; /* 禁止容器被flex布局压缩 */
}
img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* 保持图片比例填充容器 */
    border-radius: 50%;
}

内容的提问来源于stack exchange，提问作者Qatr El-Nada