IE中使用Modernizr兼容object-fit时指定目标图片的问题

我明白你的问题啦——现在代码误把overlay的小图当成背景图了，核心原因是当前的选择器会匹配容器里所有的img元素，而第一个正好是<span class="cftoverlay">里的那张overlay.png。咱们只需要精准定位到目标图片就行，下面是具体的修改方案：

修改思路 #

目标图片有两个明确的特征：

1. 带有img-responsive类
2. 嵌套在.hoverBorderWrapper容器内
   我们可以利用这两个特征中的任意一个来编写精准的选择器，避免误选overlay图片。

修改后的完整JS代码 #

if ( ! Modernizr.objectfit ) {
  tpj('.featuredpost').each(function () {
    var $container = tpj(this);
    // 方案1：通过类名精准定位目标图片
    var $targetImg = $container.find('img.img-responsive');
    // 方案2：通过父容器定位（如果类名可能变动，用这个更稳定）
    // var $targetImg = $container.find('.hoverBorderWrapper img');
    
    var imgUrl = $targetImg.prop('src');
    
    if (imgUrl) {
      $container
        .css('backgroundImage', 'url(' + imgUrl + ')')
        .addClass('compat-object-fit');
      // 必须隐藏原图片，避免和背景图重叠
      $targetImg.hide();
    }
  });
}

关键修改点说明 #

• 精准选择器：把原来的$container.find('img')替换成img.img-responsive或.hoverBorderWrapper img，确保只选中你需要的那张主图
• 隐藏原图片：添加$targetImg.hide()，因为原来的img元素还会留在DOM中，不隐藏的话会和背景图重叠，影响视觉效果

内容的提问来源于stack exchange，提问作者twan