HTML视频保持纵横比
HTML视频保持纵横比
提问于 2020-01-28 14:10:14
在评论出来之前，这个问题已经被问了几次了，这里是一个重要的方面。
我不想让video元素保持播放视频的纵横比。我希望视频元素始终具有19:6的纵横比，如果播放的视频具有21:9或4:3的纵横比也是如此。
我尝试过的：
HTML：
<main>
<div class="main-container">
<div class="video-container">
<video class="video" controls="" src="..." poster="..."></video>
</div>
</div>
</main>CSS：
main {
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 76px - 55px);
background: black;
}
main .main-container {
margin: 0 10%;
padding: 0;
width: 80%;
height: 100%;
background: black;
display: float-root;
}
main .main-container:after {
clear: both;
}
main .main-container .video-container {
margin: 0;
padding: 0;
width: 75%;
height: 100%;
float: left;
display: inline-block;
}
main .main-container .video-container .video {
margin: 25px 50px 25px 0;
padding: 0;
width: calc(100% - 50px);
max-height: calc(100% - 50px - 130px);
object-fit: contain;
outline: none;
}JS：
window.addEventListener("resize", function(e) {
var video = document.getElementsByClassName("video")[0];
var width = video.offsetWidth;
var height = width * 0.5625;
video.style.height = height;
});Stack Overflow用户
发布于 2020-01-28 14:16:41
要在视频中强制使用宽高比，只需object-fit的fill变体即可
video {
width: 200px;
height: 500px;
object-fit: fill;
}<video src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" controls muted autoplay></video>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59943033
复制相关文章
相似问题
腾讯云开发者
