HTML5视频:调整大小时保留纵横比

Question

我在容器div中将视频元素设置为100%宽度.该div的最大宽度为800px,最小宽度为400px.调整浏览器大小时,我需要在保持原始宽高比的同时调整视频元素的大小.目前它在宽度上调整大小但保持其原始高度,在上方和下方添加信箱条以弥补它.

是否可以像这样动态调整视频元素的大小而不需要使用Javascript？

Answer 1

根据盒模型,在替换元素的部分,当你想到这应该工作:由于视频拥有height的auto和一组width,它有一个intrinstic比率(如视频做),那么高度的采用值应为基于那些计算.确保你没有指定height任何地方 - 以下CSS为我工作:

video {
    width: 100%;
}
div {
    max-width: 800px;
    min-width: 400px;
}

尝试明确添加height: auto到视频 - 也许是!important为了看看它是否在其他地方设置.