响应式容器：实现子元素超出最大宽度的Hero布局问询

步骤1：调整HTML结构 #

将右侧图片容器.hero__img-wr从.c容器中移出，作为.hero的直接子元素，这样它就能突破.c的max-width限制：

<div class="hero">
    <div class="c mx-auto">
        <div class="hero__grid d-grid">
            <div class="hero__content h-100 d-flex">
                <!-- Left Child Content -->
                <!-- ... -->
            </div>
        </div>
    </div>
    <div class="hero__img-wr pos-rel h-100">
        <div class="hero__img-content hero_img">
            <!-- Right Child Content -->
            <!-- ... -->
        </div>
    </div>
</div>

步骤2：编写/修改CSS样式 #

利用绝对定位和动态计算值，让右侧容器延伸至视口右侧，并固定背景图位置：

/* Hero容器基础样式 */
.hero {
    position: relative;
    min-height: 500px; /* 根据需求自定义Hero最小高度 */
    overflow: hidden; /* 可选：防止背景图溢出产生滚动条 */
}

/* 保留.c原有样式，确保左侧内容在1188px容器内居中 */
.c {
    max-width: 1188px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1; /* 保证左侧内容在右侧图片上方显示 */
}

/* 左侧内容占容器1/3宽度 */
.hero__grid {
    grid-template-columns: 1fr 2fr;
}

.hero__content {
    grid-column: 1 / 2;
}

/* 右侧图片容器：突破.c限制，延伸至视口右侧 */
.hero__img-wr {
    position: absolute;
    top: 0;
    /* 计算大屏幕下的左侧偏移：容器左外边距 + 左侧内容宽度 */
    left: calc((100vw - 1188px) / 2 + (1188px * 1/3));
    width: calc(100vw - ((100vw - 1188px) / 2 + (1188px * 1/3)));
    height: 100%;
}

/* 右侧背景图对齐视口右下角 */
.hero_img {
    width: 100%;
    height: 100%;
    background-image: url('你的背景图路径'); /* 替换为实际图片地址 */
    background-size: cover; /* 根据需求选cover/contain */
    background-position: right bottom; /* 核心：固定到视口右下角 */
    background-repeat: no-repeat;
}

/* 响应式适配：视口小于1188px时 */
@media (max-width: 1188px) {
    .hero__img-wr {
        left: calc(100vw * 1/3);
        width: calc(100vw * 2/3);
    }
}

/* 小屏幕堆叠布局：视口小于768px时 */
@media (max-width: 768px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }
    .hero__img-wr {
        position: static;
        width: 100%;
        left: 0;
        margin-top: 2rem; /* 可选：添加内容与图片的间距 */
    }
}

关键说明 #

• 移出右侧容器是为了脱离.c的宽度限制，让它能延伸到视口边缘。
• 通过calc()动态计算左侧偏移和宽度，确保在不同屏幕尺寸下，右侧容器始终对齐左侧内容的右边缘，并填满到视口右侧。
• background-position: right bottom直接将背景图固定在视口右下角，满足需求。

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