如何在任何屏幕中保持高度和宽度与 16:9 宽高比成比例

Question

我想在任何屏幕中保持高度和宽度与 16:9 纵横比成比例。

目前面临的问题：

我的网站上有一个视频，我采用 16:9 宽高比格式。为此，我使用宽度为1280，高度为720。根据屏幕高度和屏幕宽度计算。

在我的机器上显示正确。但是，当我在我朋友的机器上看到时，它没有正确显示。当我调试时，我发现宽度应用为 1280，高度应用为 670（因为启用了书签工具栏）。由于上述高度变化，视频无法正常显示。

如何按照16:9格式按比例保持宽度和高度？

Answer 1

找到视频宽度后，您应该使用除以 16/9 的比例来找到合适的高度。靠window高度不行。

var vid_w = $(window).width() - 156; //1436 - 156 = 1280
var vid_h = vid_w / (16/9); // find 16/9 ratio height

alert('Your video width would be '+vid_w+' and height '+vid_h)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何在任何屏幕中保持高度和宽度与 16:9 宽高比成比例

How to maintain height and width proportionally to 16:9 aspect ratio in any screen

javascript

aspect-ratio