对象适合IE问题的后备

时间:2018-01-17 15:52:56

标签: javascript jquery html

我正在尝试使用object-fitModernizr在IE上工作。

这是我的HTML:

<div class="col-xs-6 col-sm-3">
    <div class="post featuredpost">
        <a href="'.$cblok['alias'].'.html" class="hoverBorder">
            <span class="cftoverlay"><img src="images/overlay.png"></span>
            <span class="hoverBorderWrapper">
                <img src="'.$image.'" class="img-responsive featuredarticles" width="370" height="400" alt="" title="">
                <span class="theHoverBorder"></span>
            </span>
        </a>
        <div class="post-details">
            <h3 class="m_title"><a href="'.$cblok['alias'].'.html">'.$cblok['title'].'</a></h3>
            <em>    <a>'.strip_tags($shortstr).'</a></em>
        </div>
    </div>
</div>

这是我的js:

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

此代码将overlay.png添加为背景图像,这是有道理的,因为这是代码遇到的第一个img标记。我需要第二个图像作为背景图像(具有img-responsive类的图像)。

如何确保使用第二张图片?

0 个答案:

没有答案