CSS实现动态宽高比图片：占满容器高度、不溢出视口、适配多宽高比

AI 小北

2026-10-3

解决方案

核心修改点

修正外层flex容器的高度规则：原来的height: auto会导致容器高度由内容撑开，改为固定为视口高度减去外层padding的可用高度，作为子元素article的高度基准
简化宽高比实现逻辑：使用CSS原生aspect-ratio属性替代手动计算宽高，代码更简洁易维护
替换高度计算基准：将article的高度基准从视口单位vh改为父容器的可用高度100%，符合基于容器尺寸调整的需求
增加视口溢出限制：给article增加max-width、max-height规则，保证不会超出指定的视口百分比

修改后完整代码

CSS代码

.contentContainer {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: min(4vh, 3.5vw);
    background: hsl(0 0% 0%);
}

.pageDefault {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 多个article之间的间距可自行调整 */
    width: 100%;
    height: 100%;
    background: hsl(0 0% 10%);
}

.pageDefault article {
    position: relative;
    margin: 0 auto;
    height: 100%;
    /* 视口溢出限制，百分比数值可自行调整 */
    max-height: 90vh;
    max-width: 90vw;
}

/* 不同宽高比配置 */
.pageDefault .aspectRatio1x1 {
    aspect-ratio: 1/1;
    background-color: red;
}
.pageDefault .aspectRatio3x2 {
    aspect-ratio: 3/2;
}
.pageDefault .aspectRatio2x3 {
    aspect-ratio: 2/3;
}
.pageDefault .aspectRatio4x3 {
    aspect-ratio: 4/3;
}
.pageDefault .aspectRatio3x4 {
    aspect-ratio: 3/4;
}

.pageDefault .imgMain,
.pageDefault .imgOther {
    object-fit: contain;
    width: 100%;
    height: 100%;
    border: 2px solid hsla(0, 0%, 100%, .25);
}

.pageDefault .imgMain {
    border-bottom: none;
}