Flexbox布局下75vh视口比例容器的图片裁剪实现方案

不需要写多断点媒体查询，也不需要给图片设置固定像素高度，核心靠CSS原生属性就能完美满足需求，实现逻辑如下：

• 首先给外层拼贴容器直接设置height: 75vh，锁死容器高度基准，避免宽度变化时整体布局被压扁
• 所有内部列容器高度继承父容器100%高度，宽度按需要的比例分配（中心40%、四个侧边各15%）
• 图片标签设置宽高100%拉满父容器，搭配object-fit: cover属性实现「保持自身宽高比、缩放填满容器、超出部分自动裁剪、无拉伸变形」的效果

完整可运行代码 #

HTML结构无需调整，和原有写法一致：

<div class="landing">
    <div class="landing-side"><img src="landing-1.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-2.jpg" alt=""></div>
    <div class="landing-center"><img src="landing-3.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-4.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-5.jpg" alt=""></div>
</div>

修正后的CSS代码：

.landing {
    position: relative;
    width: 100%;
    height: 75vh;
    display: flex;
}

.landing-center,
.landing-side {
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.landing-center {
    flex: 0 0 40%;
}

.landing-side {
    flex: 1 1 15%;
}

.landing img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

进阶需求适配（可选） #

如果需要实现「中心图片保持完整不裁剪、仅侧边图片裁剪」的效果，只需要额外加一行CSS即可，不需要改动其他逻辑：

.landing-center img {
    object-fit: contain;
}

原有写法问题说明 #

• 初始版本给外层容器设置height: auto，导致容器没有固定高度基准，子元素的75vh高度设置缺少稳定的参照系，宽度变化时布局比例容易错乱
• 给图片设置height: auto时，图片高度会随自身宽度自动计算，无法和父容器的固定高度匹配，要么出现多余留白要么被拉伸
• 固定像素高度+媒体查询的方案属于硬适配，需要针对每个分辨率单独调整参数，维护成本高，也无法覆盖所有设备尺寸
• object-fit是CSS专门为替换元素（图片、视频等）设计的尺寸适配属性，cover值是目前拼贴布局、封面图场景的标准实现方案，兼容所有现代浏览器，不需要额外hack。

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