0

我想要 2 列,左列是视频(纵横比为 16x9),右列是侧边栏(最小宽度)。当窗口的宽度发生变化时,视频应相应调整大小,侧边栏应保持其宽度。

但是,我不明白为什么 .ratio::before 有一个填充顶部。

https://imgur.com/a/OtavqX3

代码笔: https ://codepen.io/yewzy/pen/PoOxLyO

这是我的代码:

 <div class="container" id="main">
<div class="d-flex" id="row-main">
  <div class="col-sm-9 col-12">
        <div class="flex-grow-1" id="content">
        <div class="ratio ratio-16x9">
          <video id="vid"></video>
        </div>
        </div>
  </div>

<div class="col-sm-3 col-12" id="sidebar">
  <iframe class="chat"></iframe>
</div>
4

1 回答 1

0

您应该将ratio类​​放在您希望具有 16x9 纵横比的元素上。这只是将ratio-16x9类留在父 div 上,并将其ratio本身留在视频上。

查看 CodePen ~ A Pen for Yew AMP & Ratio-16x9

于 2022-03-02T18:17:42.853 回答