子女的身高为父母身高的50％（身高未知）

Question

我想得到类似的东西

我的想法可以解决这个问题。创建一个带有父类的div我有另一个div（负责背景）和视频。 我不想提供身高，因为我希望它能快速响应。

<div class="parent">

  <div class="child"></div>
  <video class="video" width="auto" height="651" controls>
    <source src="https://www.youtube.com/watch?v=7TavVZMewpY">
  </video>

</div>

.parent {
  height: 100%;
  width: 100%;
  background: white;
}

.child {
  height: 50%;
  width: 100%;
  background: green;
}

.video {
  position absolute
  left: 50%
  transform: translateX(-50%);
  top: 50%;
}

但是，此解决方案不起作用。该视频适用于父级的整个宽度和高度。如何解决该问题以及如何使用图片中的类似内容？

Answer 1

这应该有效：

• 将height:50vh应用于.parent。这使它的高度始终等于浏览器高度的50％。

• 将video包裹在.child div

中

• 使用.child

将div flex对准底部中心

• 将transform应用于您的.video，使其从其高度的50％位置向下移动，这有助于在不破坏其他CSS规则的情况下存档您想要的内容

.parent {
  height: 50vh;
  background: green;
  display:flex;
  /*Align video to center bottom */
  justify-content: center;
  align-items: flex-end
}

.video {
  height: 100px;
  width:200px;
  background-color: black;
  transform: translateY(50%)
}

<div class="parent">
  <div class="child">
     <div class="video"></div>
   </div>
</div>