为何使用Flexbox布局的IMG无法保持宽高比？

问题描述 #

使用Flexbox横向排列PNG格式Logo时，设置图片width属性放大尺寸后，图片被拉伸至容器全高，原有宽高比遭到破坏。

相关代码 #

HTML代码：

<section class="companyLogos">
        <img src="./images/logo-google.png" alt="Logo of Google">
        <img src="./images/logo-ibm.png" alt="Logo of IBM">
        <img src="./images/logo-microsoft.png" alt="Logo of Microsoft">
        <img src="./images/logo-hp.png" alt="Logo of HP">
        <img src="./images/logo-vector-graphics.png" alt="Logo of Vector Graphics">
    </section>

CSS代码：

.companyLogos {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
    }

    .companyLogos img {
        width: 8%;
    }

效果对比 #

当前效果：

预期效果：

解决方法 #

问题根源在于Flex容器默认的align-items: stretch属性，会强制子元素（图片）拉伸至容器高度，破坏宽高比。以下是几种修复方案：

方案一：调整Flex容器垂直对齐方式 #

给.companyLogos添加align-items: center，让图片垂直居中，避免被拉伸至容器高度：

.companyLogos {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center; /* 新增：垂直居中对齐子元素 */
}

.companyLogos img {
    width: 8%;
    height: auto; /* 确保高度自动适配宽度，维持比例 */
}

方案二：用object-fit强制保持宽高比 #

给图片添加object-fit: contain，确保图片在指定尺寸内保持原比例，不会拉伸变形：

.companyLogos img {
    width: 8%;
    object-fit: contain; /* 强制维持图片宽高比 */
    max-height: 100%; /* 限制图片最大高度不超过容器 */
}

方案三：组合两种方式（推荐） #

同时设置Flex容器垂直对齐和图片的object-fit，双重保障图片比例：

.companyLogos {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.companyLogos img {
    width: 8%;
    object-fit: contain;
    height: auto;
}

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