javascript - Modernizr 检查对象是否适合未给出预期结果

Question

我正在使用 Modernizr 创建 object-fit 的回退。该解决方案有效，但不是仅将其应用于不支持 object-fit 的浏览器(如 IE)，而是将代码应用于所有浏览器。这是为什么？

我的代码:

if ( ! Modernizr.objectfit ) {
    console.log('object fit is not supported');
    tpj('.featuredpost').each(function () {
        var $container = tpj(this),
                imgUrl = $container.find('.img-responsive').prop('src');
        if (imgUrl) {
            $container
                .css('backgroundImage', 'url(' + imgUrl + ')')
                .addClass('compat-object-fit');
        }
    });

    tpj('.big-post').each(function () {
        var $container = tpj(this),
                imgUrl = $container.find('.img-responsive').prop('src');
        if (imgUrl) {
            $container
                .css('backgroundImage', 'url(' + imgUrl + ')')
                .addClass('compat-object-fit');
        }
    });
}else{
    console.log('object is supported');
}

无论我检查什么浏览器，它总是记录:object fit is not supported 即使在支持 object-fit 的浏览器上也是如此。

我该怎么办？

Modernizr 被正确包含和加载(即使我将本地文件更改为 CDN 路径，我得到相同的结果):

<!-- Modernizr Library -->
<script type="text/javascript" src="js/modernizr.min.js"></script>

Answer 1

您必须使用旧版本的 Modernizr。确保您使用的是完整的 Modernizr 3.x 或 custom Modernizr 3.x build使用 CSS Object Fit 功能检查。

See example with custom Modernizr build on Codepen