Javascript 其中较大者为100%宽度或高度

在没有视频剪辑和页面滚动的情况下，我可以设置最大的宽度和高度吗

<style>
    video {
        width:  ?;
        height: ?;
    }
</style>

录像带{
宽度：？；
身高：？；
}

---

您可以对纵向或横向进行媒体查询

@媒体和全部（方向：纵向）{
录像带{
最小高度：100%；
}
}
@媒体和所有（方向：横向）{
录像带{
最小宽度：100%；
}
}

首先让我们找到高度和宽度之间的比率。例如，16/9比值表示宽度为高度的177.778%，或高度为宽度的56.25%。这就引出了以下css：

@media screen and (orientation:portrait) { /** vmin = width **/
    .video {
        width: 100vmin; /** width is the 100% **/
        height: 56.25vmin; /** height is in relation to width **/
    }
}

@media screen and (orientation:landscape) { /** vmin = height, vmax = width **/
    .video {
        width: 100vmax; // width is the 100%
        height: 56.25vmax; // height is in relation to width
        max-width: 177.778vmin; // the maximum width however is constrained by the height
        max-height: 100vmin; // and the height can't go beyond the viewport height 
    }
}

---

这是一个在右下角窗格中显示“行为-调整大小”的窗口。请注意，黄色表示横向，红色表示纵向。

使用

window.innerHeight

和

window.innerWidth

查找显示器的高度和宽度。现在找到纵横比，或者简单地找到它们的比值，并将其与视频的纵横比进行比较。 如果视频的高度/宽度大于设备的高度/宽度，请将宽度设置为100%，否则将高度设置为100%

deviceRatio = window.innerHeight/window.innerWidth;
videoRatio = //whatever it is 
if(deviceRatio>videoRatio){
    //set the video to have 100% width
}
else{
    //set the video to have 100% height
}

---

这只是做了100%的宽度和高度，我不想滚动页面以查看完整的视频大小。如果您想要其中较大的一个，您将始终在一个方向或另一个方向滚动。如果您想要100%的较小容量，请使用vmin。如果您想要确切的尺寸，请使用vw和vh。你到底需要什么？对不起，我的问题不正确，我需要最大可能的视频宽度和高度，而不需要页面滚动和视频大小剪切。你想保持纵横比吗？是的，这就是我想要的。对不起，这没有改变任何东西。高度/宽度是奇怪的属性。如果你想强制它成为一个特定的大小，试着使用最小高度/最小宽度来代替。你能添加更多关于你需要什么的细节吗？我更新了问题，我需要设置最大的宽度和高度为视频元素，而不需要页面滚动和视频剪切。

deviceRatio = window.innerHeight/window.innerWidth;
videoRatio = //whatever it is 
if(deviceRatio>videoRatio){
    //set the video to have 100% width
}
else{
    //set the video to have 100% height
}