我使用this script将视频放置在我的主页上。

问题是,当您在浏览器窗口上以全角和高度在50%上进行查看时,它不会填满整个窗口。

$(element).each(function(){
    var videoAspectRatio = $(this).data('height')/$(this).data('width'),
        windowAspectRatio = windowHeight/windowWidth;

    if (videoAspectRatio > windowAspectRatio) {
        videoWidth = windowWidth;
        videoHeight = videoWidth * videoAspectRatio;
        $(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
    } else {
        videoHeight = windowHeight;
        videoWidth = videoHeight / videoAspectRatio;
        $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
    }


有趣的是,它以另一种方式起作用(宽度设置为屏幕的30%,全高)

我确定它在保持尺寸,我想不出如何更改它。

Live preview here

最佳答案

您可以通过设置如下样式来保持比例:

    width: 100%;
    height: auto;

10-05 20:42
查看更多