子 div 忽略父级宽高比 16/9 和父级内的内容并将内容向下推

Question

我有一个带有

aspect-ratio: 16/9;

的父级 div，在该 div 内我有另一个具有相同比例的 div，但我也有一些与该子级相关的内容，当我设置子级宽高比时，它会将内容向下移动并更改高度父母与父母失去比例？有办法防止这种情况吗？ 代码笔

<div class="container">
    <div class="container-2"></div>
    <div class="content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quisquam, tempore harum commodi beatae earum aperiam! Beatae et nulla alias.
    </div>
</div>

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

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

Answer 1

使用 CSS 网格

.container {
    aspect-ratio: 16/9;
    background: #ccc;
    display: grid;
    grid-template-rows: 1fr auto; /* the first row will take the available space */
    
    .content {
        font-size: 2rem;
        padding: 1rem;
    }
    .container-2 {
        aspect-ratio: 16/9;
        min-height: 100%; /* 100% height of the available space */
        margin: auto; /* center */
        background: blue;
    }
}

<div class="container">
    <div class="container-2"></div>
    <div class="content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quisquam, tempore harum commodi beatae earum aperiam! Beatae et nulla alias.
    </div>
</div>

Answer 2

第一个子元素的宽度为 100vw，因此它不会符合您想要的方式，除非至少限制容器的高度。

将容器的高度限制为最大值

100vh

，然后使用弹性盒列，使用

flex:1

使第一个子项尽可能大。

.container {
  aspect-ratio: 16/9;
  background: #ccc;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  align-items: center;
  gap: 1em;
  
  .content {
    padding: 1rem;
    background: lightgreen;
    margin: 0 1em;
  }
  .container-2 {
    flex: 1;
    aspect-ratio: 16/9;
    background: blue;
  }
}

<div class="container">

  <div class="container-2"></div>

  <div class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quisquam, tempore harum commodi beatae earum aperiam! Beatae et nulla alias.
  </div>
</div>