Hero区域背景图与自定义形状同步缩放问题排查

问题描述 #

网页Hero区域包含背景图和通过shape-default类创建的自定义左箭头形状，窗口缩放时两者无法同步比例，出现形状溢出或与背景图间隙的问题，调整background-size和clip-path后未解决。

核心问题 #

当前背景图使用固定百分比的background-size，而形状容器是固定像素高度，clip-path用固定百分比坐标，三者缩放逻辑不统一，导致宽高比例失衡，出现错位。

修复步骤 #

1. 给Hero容器设置固定宽高比 #

用padding-top实现容器固定比例，确保缩放时整体比例不变：

.background-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    padding-top: 56.25%; /* 16:9比例，可根据需求调整为对应值 */
    position: relative;
    height: 0; /* 让高度由padding-top控制 */
}

.background-hero > .uk-flex {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}

2. 让自定义形状继承容器比例 #

去掉形状的固定高度，改用百分比高度，确保clip-path坐标基于容器比例：

.shape-default {
    width: 60vw;
    height: 100%; /* 继承父容器高度，保持比例同步 */
    max-width: 100%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 5% 50%);
    z-index: 1;
    background-color: #59195d;
}

/* 移除固定高度的媒体查询 */
@media (min-width: 1200px) {
    .uk-height-large\@l {
        height: unset;
    }
}

3. 统一背景图适配逻辑 #

删除冲突的背景图样式，用cover确保背景图始终填满容器：

/* 删除以下冲突代码 */
/* .background-position-hero {
    background-size: 63% auto;
} */

/* .background-hero {
    background-size: 50%;
} */

/* @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .background-hero {
        background-size: auto 100%;
    }
} */

4. 优化移动端适配 #

保持移动端隐藏背景图的逻辑，移除比例padding：

@media screen and (max-width: 960px) {
    .background-hero {
        background-image: none;
        padding-top: 0;
        height: auto;
    }
    .shape-default {
        width: 100%;
        clip-path: none;
        padding: 0 15px;
    }
}

效果验证 #

修改后，Hero容器会保持固定宽高比，背景图和形状基于同一比例缩放，窗口调整时两者始终对齐，不会出现间隙或溢出。

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