WordPress自定义区块中图片响应异常问题求助

问题说明 #

使用Genesis自定义区块制作封面区块时，无法让图片保持全屏高度并聚焦特定区域：移动端图片会缩至100%宽度，导致文本错位。需求是文本始终覆盖在图片上方，移动端图片保持100%高度，宽度随窗口收缩。

核心问题 #

• 容器未设置视口高度，图片无法撑满屏幕
• 图片宽高逻辑优先适配宽度，而非高度
• 文本容器缺乏移动端适配，引发错位
• 存在重复CSS代码，易导致样式冲突

修复方案 #

1. 给容器设置视口高度 #

让封面容器完全铺满当前视口，确保图片有固定高度参考：

.custom-cover-block {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.custom-cover-block-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

2. 调整图片适配逻辑 #

修改图片属性，优先保证高度，宽度自动缩放，同时通过object-position控制聚焦区域：

img.custom-cover-block-image {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: auto;
    object-fit: cover;
    object-position: center; /* 可按需改为left/right调整聚焦位置 */
    z-index: 0;
}

3. 优化文本容器响应式适配 #

移动端调整文本容器的宽度和边距，避免内容溢出或错位：

@media (max-width: 768px) {
    .custom-cover-block-content {
        max-width: 90%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .custom-cover-title-background {
        margin-left: 0;
    }
}

4. 清理重复代码 #

删除原代码中重复的CSS块，避免样式冲突。

5. 修正样式错误 #

将原代码中font-style: uppercase改为text-transform: uppercase，因为font-style用于控制斜体，文本大写需用text-transform。

修改后的完整代码 #

HTML #

<section class="alignfull custom-cover-block">
    <div class="custom-cover-block-wrapper">
        <img src="{{cover-image}}" alt="" class="custom-cover-block-image">
        <div class="custom-cover-block-content">
            <div class="custom-cover-title-background">
                <h2><span class="custom-cover-block--title">{{title}}</span></h2>
            </div>
            <p class="custom-cover-block--comment">{{comment}}</p>
            <div class="custom-cover-block--text">
                <p>{{description}}</p>
            </div>
            <div class="cover-buttons-wrapper">
                <div class="wp-block-button"><a href="{{button-1-url}}">{{button-1}}</a></div>
                <div class="wp-block-button"><a href="{{button-2-url}}">{{button-2}}</a></div>
            </div>
        </div>
    </div>
</section>

CSS #

.custom-cover-block {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
    
.custom-cover-block-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

img.custom-cover-block-image {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: auto;
    object-fit: cover;
    object-position: center;
    outline: none;
    border: none;
    box-shadow: none;
    z-index: 0;
}

.custom-cover-block-content {
    margin: 0;
    position: absolute;
    text-align: left;
    max-width: 40%;
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}

.custom-cover-block--comment {
    font-family: var(--wp--preset--font-family--alkaline);
    font-size: clamp(2.75rem, 6vw, 3.25rem);
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    padding-right: 1rem;
    color: var(--wp--preset--color--background);
    letter-spacing: 2px;
    padding-top: 50px;
    margin: 0;
}

.custom-cover-block--title {
    color: var(--wp--preset--color--background);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--large);
    background: #f89728;
    padding: 10px;
    letter-spacing: 2px;
    box-shadow: 5px 6px var(--wp--preset--color--primary);
}

.custom-cover-block--text {
    font-size: 1.7rem;
    font-weight: 600;
    max-width: 100%;
}

.wp-block-button {
    display: inline-block;
    margin: 20px;
}

.custom-cover-title-background {
    margin-left: -60px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .custom-cover-block-content {
        max-width: 90%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .custom-cover-title-background {
        margin-left: 0;
    }
}

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