我遇到了这个网站：https://hinge.co/，并试图遵循HTML / CSS来了解他们如何获得流畅，响应迅速的HTML5视频背景。
我遇到了一些我不理解的属性，例如：
max-width: calc(177.778vh);
height: calc(56.25vw);
我知道这是他们使用的JS插件，并且calc中的值是动态的。但是为什么vh高度会超过100？那会不会比视口本身大？视频似乎是正确的视口大小，所以我不明白这里的逻辑。
有人以前创建过这样的东西，可以帮助您了解如何完成吗？
答案 0 :(得分：0)
我已经检查了代码，这两条特殊的行除了限制视频的缩放比例外，所做的不多。
诀窍是什么
min-height: 100vh;
min-width: 177.77vh;
这保证了视频将覆盖整个屏幕甚至更多，而不管视频的大小/形状（垂直还是水平）。
答案 1 :(得分：0)
我遇到了这个网站：https://hinge.co/，并试图遵循HTML / CSS来了解他们如何获得流畅，响应迅速的HTML5视频背景。
他们没有使用HTML5视频元素。他们嵌入了Vimeo的视频，然后使用CSS定位了视频。
我了解这是他们正在使用的JS插件，并且calc中的值 是动态的。但是为什么vh高度会超过100？
他们可能这样做是为了在任何屏幕尺寸下都能保持视频的长宽比正确。
不会 大于视口本身？该视频似乎是 确切的视口大小，所以我不明白这里的逻辑。
它使包装程序溢出。其中有溢出作为隐藏。
类似示例：https://startbootstrap.com/snippets/video-header/（不完全相同，但此处将HTML5视频元素用于视频背景）
MDN上的HTML视频元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video