对于这个问题，我真的很着急，所以我们将不胜感激任何帮助。
我有一个 HTML5 <video>我想成为:-
- 全宽 - 控件应始终为屏幕宽度的 100%。
- 最大像素高度 - 视频的高度不会增加超过视频的像素高度。
- 水平调整到边界 - 当浏览器调整大小时(同时保持比例)。
- Resize vertically to bounds - 当浏览器垂直调整大小时(同时保持比例)。
这是我目前所拥有的:-
html, body, .page {
height: 100%;
background-color: #ccc;
padding: 0;
margin: 0;
}
video { width: 100%; height: auto; }<html>
<body>
<div class="video-content">
<video style="max-height: 320px;" controls> <!-- width="320" height="200" -->
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
</video>
</div>
</body>
</html>所以这满足 (1) 即控件是屏幕的整个宽度和 (2) 视频的高度不大于视频的分辨率高度(320 像素)。
当浏览器水平调整大小时，(3) 也满足。
但是，垂直调整大小时会出现如下问题:-
请注意滚动条(与视频大小调整相对)。
所以如果我更新 CSS 从
video { width: 100%; height: auto; }
...到...
video { width: 100%; height: 100%; }
...那么除了 (3) 这次所有条件都满足，即控件和实际视频之间存在差距:-
如果我可以组合一个 100%和 auto进入height <video 的属性标记这可能会解决它。可以用 JavaScript 拼凑一些东西，但我的直觉是我在做一些愚蠢的事情。
在此先感谢您的任何提示/帮助!
最佳答案
如果我理解，这是解决方案:
video {
width:100%;
height:auto;
max-height:100%
}
.video-content {
height:100vh;
}<div class="video-content">
<video controls> <!-- width="320" height="200" -->
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
</video>
</div>关于css - 具有最大高度问题的全宽 HTML5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50512426/