Flexbox容器图片溢出问题求助：适配固定尺寸卡片无需指定尺寸

问题描述 #

需将图片适配到固定尺寸的Flexbox卡片中，要求不指定图片具体尺寸，但当前图片不受Flexbox约束，出现溢出情况。

修改后的CSS代码 #

.card {
    border: 2px solid #072227;
    border-radius: 20px;
    display: flex;
    height: 30vh;
    width: 40vw;
    overflow: hidden; /* 确保卡片整体内容不溢出 */
}
.card__profile-image {
    display: flex;
    flex-direction: column;
    height: 100%; /* 继承卡片高度 */
    flex: 0 0 auto; /* 避免被右侧内容挤压 */
    width: auto; /* 宽度由内容决定，也可按需设置固定比例 */
}
.img__cont {
    flex-grow: 1; /* 占据除名字区域外的所有可用空间 */
    overflow: hidden; /* 隐藏超出容器的图片部分 */
}
.img__cont img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，填充容器 */
}
.card__name {
    padding: 8px; /* 增加内边距优化显示 */
    text-align: center;
}

关键修改说明 #

• .card 添加 overflow: hidden：确保卡片内部所有内容不会超出卡片边界。
• .card__profile-image 设置 height: 100% 和 flex: 0 0 auto：让头像区域占满卡片高度，同时避免被右侧内容挤压变形。
• .img__cont 添加 flex-grow: 1 和 overflow: hidden：让图片容器自动填充头像区域除名字外的剩余空间，并隐藏溢出的图片部分。
• 图片设置 object-fit: cover：在不指定具体尺寸的情况下，让图片保持原有比例并完全填充容器，避免拉伸或溢出。

预期效果 #

图片会自适应卡片内的头像区域，保持比例且不会溢出，名字区域固定在头像下方，整体布局符合预期。

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