Html HTML5 视频：调整大小时保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3990229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video: Retain aspect ratio when resizing
提问by Brandon Durham
I have a video element set to 100% width in a container div. That div has a max-width of 800px and min-width of 400px. When resizing the browser I need the video element to resize while retaining its original aspect ratio. Currently it resizes in width but remains its original height, adding letterbox bars above and below to make up for it.
我在容器 div 中有一个设置为 100% 宽度的视频元素。该 div 的最大宽度为 800 像素，最小宽度为 400 像素。调整浏览器大小时，我需要调整视频元素的大小，同时保持其原始纵横比。目前它调整了宽度但保持其原始高度，在上方和下方添加信箱条来弥补它。
Is it possible to resize the video element dynamically like this without resorting to Javascript?
是否可以像这样动态调整视频元素的大小而不使用 Javascript？
回答by Josh Lee
According to the box model, in the section on replaced elements, this should work as you expect: Since the video has a heightof autoand a set width, and it has an intrinstic ratio(as videos do), then the used value of height should be computed based on those. Make sure you are not specifying the heightanywhere — the following CSS worked for me:
根据盒模型，在替换元素的部分，这应该按您的预期工作：由于视频有一个heightofauto和一个 set width，并且它有一个内在比率（就像视频一样），那么高度的使用值应该是根据这些计算。确保您没有指定height任何地方 - 以下 CSS 对我有用：
video {
width: 100%;
}
div {
max-width: 800px;
min-width: 400px;
}
Try explicitly adding height: autoto the video — maybe with !importantto see if it's getting set somewhere else.
尝试明确地添加height: auto到视频中——也许!important看看它是否被设置在其他地方。
