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