Bootstrap 比率 16x9 在使用 Azure Media Player 时产生较大差距
我想要 2 列，左列是视频（宽高比 16x9），右列是侧边栏（最小宽度）。当窗口的宽度发生变化时，视频应相应调整大小，并且侧边栏应保持其宽度。
但是，我不明白为什么 .ratio::before 有一个填充顶部。
代码笔：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>
I would like to have 2 columns, with the left column being a video (with aspect ratio 16x9) and the right column being a sidebar (with min-width). When the width of the window changes, the video should resize accordingly and the sidebar should maintain it's width.
However, I can't understand why there is a padding top for .ratio::before.
Codepen: https://codepen.io/yewzy/pen/PoOxLyO
Here is my code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您应该将
ratio类放在您想要具有 16x9 宽高比的元素上。这只会将ratio-16x9类保留在父 div 上，并将ratio本身保留在视频上。查看 CodePen ~ A Pen for Yew AMP &比例-16x9
You should put the
ratioclass on the element you want to have the 16x9 aspect ratio. This just leaves theratio-16x9class on the parent div, and theratioitself on the video.Check out the CodePen ~ A Pen for Yew AMP & Ratio-16x9