我正在寻找一种简单的解决方案,既能始终保持视频的宽高比,又能使视频的宽度和高度始终适合浏览器窗口。
到目前为止,我发现的所有解决方案都只适合宽度,但我还需要适合高度。 :
最佳答案
Bootstrap做这个。诀窍是 CSS 底部填充是根据元素的宽度计算的。
.video-container {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%; /* calculate by aspect ratio (h / w * 100%) */
}
.video-container .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<video class="video"></video>
</div>
参见 this example .它适用于 <embed>
, <object>
, <iframe>
, 和 <video>
标签。我的例子只是一个彩色的 <div>
使其纵横比保持不变。
关于javascript - HTML 视频调整大小以始终适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35140426/