如何让div子元素保持与父div的尺寸比例一致？

我有一个保持16:9比例的div，内部包含文本、图片、图标等各类元素。这个div能自适应填充视口，调整浏览器窗口时，div（背景与body不同）可正常缩放，但内部子元素尺寸保持不变，这对我开发的适配不同分辨率的展示网站极为不利。需要让div内的子元素正确对齐并随div自适应缩放。

我尝试过以下方法但均无效：

• 使用viewport units，效果不佳
• 用%单位设置字体大小，再用em缩放其他元素
• 仅用%单位设置所有属性

原代码 #

CSS #

body {
    background: black;
    user-select: none;
    margin: 0;
    height: 100vh;
}
.container2 {
    overflow: auto;
    box-sizing: border-box;
    resize: both;
    overflow: auto;
    max-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.presentation-place {
    user-select: none;
    background: white;
    top: 50%;
    transform: translate(0, -50%);
    position: absolute;
    align-items: center;
    aspect-ratio: 16 / 9;
}
@media screen and (max-aspect-ratio: 16 / 9) {
    .presentation-place {
        width: 100vw;
    }
}

@media screen and (min-aspect-ratio: 16 / 9) {
    .presentation-place {
        height: 100vh;
    }
}
.slide {
    font-size: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: red;
    background-position: center center;
}
.title1 {
    margin-left: 1em;
    font-size: 6em;
    position: absolute;
    margin-top: 2em;
}

HTML #

<html>
    <body>
        <div class="container">
            <div class="presentation-place">
                <div class="slide s1">
                    <h1 class="title1">test</h1>
                </div>
            </div>
        </div>
    </body>
</html>

解决方案 #

方法1：基于视口单位结合容器比例动态设置基准字体 #

核心思路是给容器设置与自身尺寸挂钩的font-size，让子元素的em单位随容器缩放：

body {
    background: black;
    user-select: none;
    margin: 0;
    height: 100vh;
    overflow: hidden; /* 防止视口滚动 */
}
.presentation-place {
    user-select: none;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 更可靠的居中方式 */
    aspect-ratio: 16 / 9;
}
@media screen and (max-aspect-ratio: 16 / 9) {
    .presentation-place {
        width: 100vw;
        font-size: 1vw; /* 以容器宽度的1%为基准 */
    }
}
@media screen and (min-aspect-ratio: 16 / 9) {
    .presentation-place {
        height: 100vh;
        font-size: calc(100vh * 0.01777); /* 16/9≈1.777，保证和宽度基准比例一致 */
    }
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: red;
    background-position: center center;
}
.title1 {
    margin-left: 1em;
    font-size: 6em;
    position: absolute;
    margin-top: 2em;
}

方法2：用CSS变量+clamp简化计算 #

用clamp自动选择合适的基准值，无需媒体查询：

body {
    background: black;
    user-select: none;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
.presentation-place {
    user-select: none;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 16 / 9;
    /* clamp(最小值, 首选值, 最大值)：自动根据视口比例选择基准 */
    --base-size: clamp(calc(100vh * 0.01777), calc(100vw * 0.01), calc(100vh * 0.01777));
    font-size: var(--base-size);
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: red;
    background-position: center center;
}
.title1 {
    margin-left: 1em;
    font-size: 6em;
    position: absolute;
    margin-top: 2em;
}

适配其他元素的技巧 #

• 图片、图标：用em设置尺寸（如width: 8em; height: auto;），或用calc(var(--base-size) * 8)
• 间距：统一用em或基于--base-size的计算值，保证间距随容器比例缩放
• 定位：结合%和em设置top/left值，确保位置相对容器比例不变

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