子Div打破父容器16/9宽高比致内容下移，如何解决？

问题原因 #

父容器的aspect-ratio是首选宽高比，当内部内容总高度超过该比例计算出的高度时，容器会被内容撑开，打破原本的宽高比。你的子div设置aspect-ratio:16/9后，会基于父容器的宽度计算自身高度，再加上下方content的高度，总和超过了父容器16/9的高度阈值，导致父容器被拉伸。

解决方案 #

方案一：绝对定位子元素（脱离文档流）

让子div脱离文档流，不占据布局空间，同时父容器设为相对定位作为定位参考，保证子div在父容器内显示，content可正常放置在上方：

.container {
    aspect-ratio: 16/9;
    background: #ccc;
    position: relative;

    .content {
        font-size: 2rem;
        padding: 1rem;
        position: relative;
        z-index: 1;
    }
    .container-2 {
        aspect-ratio: 16/9;
        background: blue;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

方案二：Grid布局层叠元素

用Grid将子div和content放在同一网格区域，两者共享父容器空间，不会叠加高度撑开父容器：

.container {
    aspect-ratio: 16/9;
    background: #ccc;
    display: grid;

    .content {
        font-size: 2rem;
        padding: 1rem;
        grid-area: 1/1;
        z-index: 1;
    }
    .container-2 {
        aspect-ratio: 16/9;
        background: blue;
        grid-area: 1/1;
        width: 100%;
        height: 100%;
    }
}

可选：裁剪超出内容（若允许截断content）

如果可以接受content被截断，给父容器添加overflow: hidden，强制保持宽高比：

.container {
    aspect-ratio: 16/9;
    background: #ccc;
    overflow: hidden;

    .content {
        font-size: 2rem;
        padding: 1rem;
    }
    .container-2 {
        aspect-ratio: 16/9;
        background: blue;
    }
}

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