flex容器中如何强制图片高度匹配其他同层级flex元素高度

解决方案 #

核心逻辑是利用flex布局默认的子项高度拉伸特性，让右侧容器高度自动和左侧文本高度对齐，再对图片做适配处理保证宽高比、无裁剪。

修改后的完整CSS代码 #

.flexbox {
    border: 1px solid;
    width: 400px;
    margin: 10px;
    display: flex;
    /* 明确子项高度自动拉伸对齐，默认值为stretch，可省略 */
    align-items: stretch;
}

.left {
    width: 60%;
}

.right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    /* 若需要图片在右侧容器内垂直居中，可添加如下属性 */
    /* align-items: center; */
}

.right img {
    /* 高度和右侧容器保持一致，即和左侧文本高度同步 */
    height: 100%;
    /* 宽度自适应，维持图片原始宽高比 */
    width: auto;
    /* 防止图片过宽超出右侧容器的宽度限制 */
    max-width: 100%;
    /* 确保图片完全展示，无裁剪、不变形 */
    object-fit: contain;
}

关键属性说明 #

• flex容器默认的align-items: stretch属性会让所有子项的高度自动对齐，以高度最高的子项为准，这里左侧文本的高度由内容撑开，因此右侧容器高度会自动匹配左侧文本高度。
• object-fit: contain保证图片在调整尺寸时始终维持原始宽高比，不会被拉伸变形，也不会出现裁剪，会完整展示在可用空间内。

HTML代码无需修改，直接沿用原有结构即可。

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