其中较大的100％宽度或高度

Question

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

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

Answer 1

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

link

<style>
    @media all and (orientation: portrait) {
        video {
            min-height: 100%;
        }
    }

    @media all and (orientation: landscape) {
        video {
            min-width: 100%;
        }
    }
</style>

Answer 2

首先让我们找到高度和宽度之间的比率。例如，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 
    }
}

这是显示行为的demo - 调整右下方窗格的大小。请注意，黄色表示横向，红色表示纵向。

Answer 3

使用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
}