根据宽高比“预测”视频容器的高度

时间:2018-06-25 09:28:17

标签: javascript css reactjs html5-video aspect-ratio

用例是这样的:

假设我有一个响应错误或要播放的视频URL的服务,如果有视频,React将渲染视频,如果不存在则返回错误。 我想在所有宽度/设备中都具有一个占位符/错误,且高度始终与应该从服务中传入的视频相同。

换句话说,我想应用如下规则:如果要输入16:9视频,请使错误占位符高度与该屏幕尺寸中的视频高度相同。

如何响应每个纵横比计算此高度?这有意义吗?

谢谢

1 个答案:

答案 0 :(得分:1)

您可以根据纵横比在容器上使用padding-bottom CSS技巧。取第二个数字除以第一个,然后将其设为百分比值:

1:1 = 100% 16:9 = 56.25% 4:3 = 75%

https://css-tricks.com/aspect-ratio-boxes/