如何设置元素的宽度和高度，但只能使用较大的一个，具体取决于屏幕尺寸？

Question

我正在创建一个具有灵活布局的网站。我有一个背景视频，我想对其进行设置，使其宽度为100％或高度为100％。我只希望在任何给定的情况下使用宽度或高度，并且我希望浏览器选择这两个尺寸中的任何一个都会使视频最大。我不能使用min-height和min-width，因为视频明显大于屏幕尺寸，因此我必须设置实际的宽度和实际的高度，但是我希望浏览器在使用width或height之间切换取决于屏幕的长宽比。

有人知道怎么做吗？理想情况下，该解决方案将仅使用CSS和HTML，但是如果只能使用JavaScript来完成，那么我欢迎任何建议！预先感谢！

Answer 1

添加带有视口名称的元标记，然后在CSS中设置position属性可能会满足您的需要。

Answer 2

将最小宽度/高度与视口宽度/高度相结合：

CSS：

#backgroundVideo{
    min-height : 100vw; /* the height will always be at least as great as the viewport width */
    min-width : 100vh; /* the width will always be at least as great as the viewport height */
}