纯CSS实现嵌套容器响应式设计：电视屏幕容器固定定位需求

需求说明 #

• 页面前后存在普通文本内容
• .mainbg-container 容器内显示一张包含桌面电视的背景图
• .secondarybg-container 作为电视屏幕容器，必须在任何视口尺寸（大屏/小屏、横屏/竖屏）变化时，始终精准匹配电视屏幕的位置和尺寸：左上角位置、宽高完全贴合电视屏幕区域
• 后续将用JS更换该容器背景模拟换台，此部分无需处理

实现要求 #

优先使用原生CSS（Vanilla CSS）实现，也可提供框架方案，但需明确原生方案是否可行。

已尝试的两种方案 #

方案一：百分比+vw/vh + background-size: cover #

用百分比和视口单位定义容器位置尺寸，结合cover保证背景铺满容器，但存在问题：

• 电视背景图可能超出视口无法完整显示
• 视口变化时，.secondarybg-container无法精准匹配电视屏幕位置和尺寸

:root {
    --secondary-container-left: 5%;
    --secondary-container-top: 6%;
    --secondary-container-width: 69%;
    --secondary-container-height: 56%;
}

.mainbg-container {
    width: 100%;
    height: 100vh;
    background-image: url("https://live.staticflickr.com/65535/54323668662_22f08bcf75_b.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.secondarybg-container {
    position: absolute;
    left: var(--secondary-container-left);
    top: var(--secondary-container-top);
    width: var(--secondary-container-width);
    height: var(--secondary-container-height);
    background-image: url("https://live.staticflickr.com/65535/54323668672_94ca9f17cb_z.jpg");
    background-color: #4CAF50;
    background-size: cover;
    background-position: center;
    z-index: 1;
    min-width: 300px;
    min-height: 200px;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          Some other content
        </div>
    </div>
    <p>Some content after</p>
</div>

方案二：background-size: contain #

用contain保证电视背景图始终完整显示，但视口变化时，.secondarybg-container仍无法匹配电视屏幕：

:root {
    --secondary-container-left: 39%;
    --secondary-container-top: 6%;
}

.mainbg-container {
    width: 100%;
    height: 100vh;
    background-image: url("https://live.staticflickr.com/65535/54323668662_22f08bcf75_b.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.secondarybg-container {
    position: absolute;
    left: var(--secondary-container-left);
    top: var(--secondary-container-top);
    background-image: url("https://live.staticflickr.com/65535/54323668672_94ca9f17cb_z.jpg");
    background-color: #4CAF50;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    min-width: 128px;
    min-height: 90px;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          Some other content
        </div>
    </div>
    <p>Some content after</p>
</div>

原生CSS解决方案（完全可行） #

核心思路 #

1. 给.mainbg-container设置固定宽高比（匹配电视背景图的实际比例），用padding-top实现，确保背景图始终按比例完整显示且居中
2. 基于这个比例容器，用百分比定义.secondarybg-container的位置和尺寸（百分比需根据电视屏幕在背景图中的实际占比计算），视口变化时所有元素同步缩放，保持精准匹配

代码实现 #

:root {
    /* 电视屏幕在背景图中的相对位置/尺寸（需用图片工具测量后转换为百分比） */
    --screen-left: 12.5%;
    --screen-top: 8%;
    --screen-width: 75%;
    --screen-height: 60%;
    /* 电视背景图的宽高比：(图片高度/图片宽度)*100%，示例为16:9 */
    --tv-aspect-ratio: 56.25%;
}

.mainbg-container {
    width: 100%;
    /* 用padding-top维持宽高比，容器高度由padding撑开 */
    padding-top: var(--tv-aspect-ratio);
    background-image: url("https://live.staticflickr.com/65535/54323668662_22f08bcf75_b.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    /* 限制最大宽度，避免大屏下图片过大 */
    max-width: 1200px;
    margin: 0 auto;
}

.secondarybg-container {
    position: absolute;
    left: var(--screen-left);
    top: var(--screen-top);
    width: var(--screen-width);
    height: var(--screen-height);
    background-image: url("https://live.staticflickr.com/65535/54323668672_94ca9f17cb_z.jpg");
    background-size: cover;
    background-position: center;
    z-index: 1;
}

<div id="container">
    <p>Some content before</p>
    <div class="mainbg-container">
        <div class="secondarybg-container">
          Some other content
        </div>
    </div>
    <p>Some content after</p>
</div>

关键说明 #

• 宽高比计算：--tv-aspect-ratio的值为 (图片高度 ÷ 图片宽度) × 100%，比如1920x1080的图片就是 1080/1920*100% = 56.25%
• 屏幕参数测量：--screen-left等参数需要用PS、Figma等工具，测量电视屏幕在背景图中的相对位置/尺寸，转换成百分比（例如：屏幕左边缘距离背景图左边缘的像素数 ÷ 背景图总宽度 ×100%）
• 该方案完全基于原生CSS，无需JS，视口变化时自动按比例缩放，确保屏幕容器始终贴合电视区域

框架方案补充 #

如果使用React、Vue等框架，实现逻辑和原生CSS完全一致，仅需将代码封装为组件即可。原生方案已完全满足需求，框架没有额外优势。

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