WordPress多设备端Hero video/image适配CSS方案求助

开发者阿泽

2026-8-27

WordPress Hero区域视频/图片跨设备自适应修复方案

桌面端Hero视频拉伸变形修复

视频拉伸的核心原因是硬编码了和视频原生分辨率不匹配的固定宽高，且缺失内容适配规则，将以下代码添加到WordPress后台「外观-自定义-额外CSS」中即可解决：

/* Hero视频防拉伸规则 */
.hero-section video,
.wp-block-cover__video-background {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center center;
}

如果你的Hero区域不需要占满整个视口高度，把代码中100vh替换为实际容器高度即可，不要直接给video标签写死固定像素宽高。

移动端Hero海报图宽度自适应实现

海报图无法适配设备宽度，通常是被设置了固定宽度、或父容器存在宽度溢出限制，用以下代码可实现图片宽度100%适配设备、不变形：

/* 移动端自适应规则 适配屏幕宽度小于768px的设备 */
@media (max-width: 768px) {
    .hero-section .hero-poster,
    .wp-block-cover__image-background,
    .hero-section img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }
    /* 清除父容器固定宽高限制 */
    .hero-section,
    .wp-block-cover {
        width: 100% !important;
        max-width: 100vw;
        overflow: hidden;
    }
}