根据纵横比“预测”视频容器高度答案

【问题标题】："Predict" video container height depending on aspect ratio根据纵横比“预测”视频容器高度
【发布时间】：2018-06-25 09:28:17
【问题描述】：

用例是这样的：

假设我有一个服务响应错误或要播放的视频 url。如果有视频，React 将渲染视频，如果没有，则显示错误。我希望在所有宽度/设备中都有一个占位符/错误，其高度始终与应该从服务中输入的视频相同。

换句话说，我想应用这样的规则：如果我有 16:9 的视频进来，则使错误占位符高度与该屏幕尺寸中的视频高度相同。

如何根据纵横比响应地计算此高度？这有意义吗？

谢谢

【问题讨论】：

【解决方案1】：

您可以根据纵横比在容器上使用padding-bottom css 技巧。取第二个数除以第一个数，得到一个百分比值：

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

【讨论】：