Javascript响应视频高度/宽度

我想制作一个全屏视频响应的登录页。我有一个视频（1920x1080），它是居中的。但是当我调整窗口大小时，它的大小没有正确调整。请只提供Javascript解决方案

示例它应该是什么样子： 谢谢你的帮助

到目前为止：

var $vid = $('.full-screen-video');

    updateSize();
    $(window).resize(function() {
        updateSize();
    });

    function updateSize() {

        var $eWidth = window.innerWidth;

        var $AspectRatio = 1080 / 1920;

        var $newHeight = $eWidth * $AspectRatio;

        $vid.css({"width": $eWidth, "height": $newHeight});


    };

---

你的代码是正确的。使用控制台查看流程：

function updateSize() {

    var $eWidth = window.innerWidth;

    var $AspectRatio = 1080 / 1920;

    var $newHeight = $eWidth * $AspectRatio;

    console.log('eWidth: ' + eWidth);
    console.log('newHeight: ' + newHeight); 

    $vid.css({"width": $eWidth, "height": $newHeight});

    console.log('real width' + $('.full-screen-video').width());
    console.log('real height' + $('.full-screen-video').height());
};

您可以测试这个css规则：

.full-screen-video {
    width: 100vw;
    height: calc(100vw / 1.7);  /* 1.7 is 1920/1080 */
 }

仅使用css工作：

<div class="fullsize-container">
    <video autoplay id="landing-video" class="full-screen-video" width="100%" height="100%" preload="auto" loop="loop">
        <source src="assets/landing-video.mp4" type="video/mp4">
    </video>
</div>

.fullsize-container {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.full-screen-video {
    width: 1920px;
    height: 1080px;
    max-width: 1920px;
    max-height: 1080px;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.全尺寸集装箱{
位置：绝对位置；
身高：100%；
宽度：100%；
左：0；
排名：0；
}
.全屏视频{
宽度：1920像素；
高度：1080px；
最大宽度：1920像素；
最大高度：1080px；
位置：绝对位置；
左：50%；
最高：50%；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

代码应调整目标元素的大小，即调整窗口大小后的全屏视频。其他地方一定有逻辑错误。它调整了视频的大小，但计算的宽度和高度错误。我在较小的设备上有黑色边框您找到的填充是垂直的还是水平的？垂直和水平：/OK now only vertical要使用css规则，您必须删除更改大小的javascript代码。是你干的吗？是的。我现在只有垂直填充。使用javascript代码。不知道如何修复：/b可能不是垂直填充，您将固定高度设置为“视频”，降低浏览器的高度以查看垂直填充是否会删除？是的，当我降低浏览器的高度时，边框会删除，因此一切正常！你为视频设置了一个固定的高度，它成功了！如果您不想这样做，请将视频高度设置为

100vh

或

100%

。