Blazor服务器端菜单用户头像CSS实现：等比缩放+圆形裁剪

直接通过「容器+图片」的结构配合CSS就能满足需求，代码如下：

1. Blazor组件代码 #

<!-- 菜单栏中的用户头像 -->
<div class="avatar-container">
    <img src="@UserAvatarUrl" alt="用户头像" class="avatar-img" />
</div>

将@UserAvatarUrl替换为实际的用户头像地址即可。

2. CSS样式 #

.avatar-container {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #f0f0f0; /* 可根据需求替换空白区域的背景色 */
    display: block;
}

关键逻辑说明 #

• object-fit: contain：核心属性，保证图片按原始比例缩放至24x24容器内，完整显示不裁剪，多余区域用背景色填充（比如64x32的图片会缩成24x12，上下各留6px背景）。
• border-radius: 50% + overflow: hidden：把容器裁剪为圆形，圆形外的区域直接显示页面背景。
• object-position: center：确保缩放后的图片在容器内居中对齐。

内容的提问来源于stack exchange，提问作者David Thielen