Question

在我的网页上使用背景视频，那么对于全尺寸的html5视频，css属性object-fit的替代方式是什么？

我发现很多浏览器都不支持它：http://caniuse.com/object-fit。

Answer 1

有点粗糙，仅处理16：9宽高比视频，但我用过这个......

function fill() {
    if (9 * $( window ).width() > 16 * $( window ).height()) {
        $('video').css('width', '100%');
        $('video').css('height', '');
    } else {
        $('video').css('width', '');
        $('video').css('height', '100%');
    }
}
function fit() {
    if (9 * $( window ).width() < 16 * $( window ).height()) {
        $('video').css('width', '100%');
        $('video').css('height', '');
    } else {
        $('video').css('width', '');
        $('video').css('height', '100%');
    }
}
$( document ).ready(function() {
    fit();
    $( window ).on('resize', function() {
        fit();
    });
});

我想这是一个很好的起点。

Answer 2

我找到了解决问题的方法。

这可以通过以下代码用css修复：

background-size: cover;
min-width: 100%;
min-height: 100%;

是的，它就像一个object-fit，适用于所有浏览器。

HTML5视频＆＃39;对象适应＆＃39; CSS中的altarnative

2 个答案: