视频响应高度的宽高比是否可能?

时间:2014-08-24 02:03:47

标签: javascript html css responsive-design aspect-ratio

我一直在寻找这个问题的答案太久但没有这样的运气!

我希望能够嵌入YouTube视频,如果视口的高度或宽度发生变化,视频的大小会发生变化,同时保持正确的宽高比,这可能吗?

我知道其他解决方案,例如fit vid和padding-bottom方法,但如果要更改视口的高度,这些解决方案都不会重新计算宽高比。

欢迎任何想法,js或css ......

谢谢!

1 个答案:

答案 0 :(得分:0)

当然可以。

使用JavaScript,在init()期间检测视口尺寸和视频尺寸(和宽高比)作为基线。当你在那里时,为window.onorientationchange事件设置一个处理程序(它将获取调整大小)。

在您的处理程序中,哪个轴已更改大小。调整视频大小(保留原始高宽比)以适应该维度,并进行双重检查以确保其他轴现在不会过大。 如果是,请再次调整大小。