Flexbox元素位置异常求助：菜单图标错位的自适应解决方法

我用以下HTML结构构建了一组菜单：

<div class="menuLink">
    <div class="menuLinkInner">                            
        <div class="menuLinkText standardText">Profile</div>
        <div class="menuLinkIcon">
            <img src="core/img/icons/user.png" />
        </div>
    </div>
</div>

<div class="menuLink">
    <div class="menuLinkInner">                            
        <div class="menuLinkText standardText">Settings</div>
        <div class="menuLinkIcon">
            <img src="core/img/icons/setting.PNG" />
        </div>
    </div>
</div>

<div class="menuLink">
    <div class="menuLinkInner">                            
        <div class="menuLinkText standardText">Logout</div>
        <div class="menuLinkIcon"></div>
    </div>
</div>

这些元素组成菜单列表，menuLink和menuLinkInner均为flex容器，menuLinkInner通过space-between实现文本与图标分离，统一菜单文本起始位置。

理论上图片应位于flex容器末端，但实际有一个图标被推至右侧，其容器menuLinkIcon被过度拉伸，似乎读取了图片原始宽度。图片本身尺寸较大，仅基于父元素高度缩放，但父容器却采用了图片缩放前的原始宽度。

我希望阻止该行为，让父容器识别图片按最大高度缩放后的尺寸，且避免直接调整图片尺寸（需适配任意分辨率）。当前使用的CSS如下：

.standardText {
    font-family: Brutel-Thin;
    color: aliceblue;
    letter-spacing: 3px;
    font-size: 25px;
}
.linksContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
}
.menuLink {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    cursor: pointer;
}
.menuLinkInner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 3.5vh;
    border-top: 1px solid lightgrey;
    padding-right: 5px;
}
.menuLinkInner:hover {
    background: rgba(170, 170, 165, 0.10)
}
.menuLinkText {
    margin-left: 20px;
    margin-top: .3vh;
    color: grey;
}
.menuLinkIcon {
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

问题根源是浏览器会默认以图片原始宽高比计算布局尺寸，即使图片按高度缩放，父容器仍会被原始尺寸撑开。以下是几种适配任意分辨率的解决方法：

方法一：让图片完全适配父容器尺寸 #

给图标容器内的图片添加样式，强制它以父容器高度为基准缩放，宽度自动按比例调整，同时限制最大宽度不超出父容器：

.menuLinkIcon img {
    height: 100%;
    max-width: 100%;
    object-fit: contain; /* 可选，保持图片比例不拉伸变形 */
}

这样父容器menuLinkIcon会根据缩放后的图片尺寸自动调整宽度，不会被原始尺寸撑开。

方法二：限制图标容器最大宽度 #

给menuLinkIcon设置合理的最大宽度，同时防止flex布局压缩容器，再让图片按比例缩放：

.menuLinkIcon {
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    max-width: 40px; /* 根据需求设置合适的最大宽度 */
    flex-shrink: 0; /* 避免容器被flex布局挤压 */
}
.menuLinkIcon img {
    height: 100%;
    width: auto; /* 按图片原始比例自动计算宽度 */
}

这种方式能确保图标容器不会过度拉伸，同时图片保持正确比例。

方法三：使用aspect-ratio固定图片比例（现代浏览器支持） #

如果目标浏览器支持CSS的aspect-ratio属性，可给图片设置原始宽高比，让浏览器自动计算缩放后的尺寸：

.menuLinkIcon img {
    height: 100%;
    aspect-ratio: 1/1; /* 替换为图片实际宽高比，比如2/1等 */
    object-fit: contain;
}

该方法能让图片按指定比例自适应父容器高度，父容器也会同步采用缩放后的图片宽度。

内容的提问来源于stack exchange，提问作者Northern Scrub