使用parallax.js实现响应式图片遇阻，且jsfiddle中图片丢失

你当前的核心问题是：parallax插件生成的镜像图片自带固定宽度和可见性样式，导致srcset无法触发图片切换，且常规写法会直接让图片不显示。下面给出两种可行的解决思路：

方案一：动态切换视差图片源 #

利用插件的JS API，结合窗口大小监听，实现不同视口下切换对应图片：

1. 给目标视差容器加专属标识类：

<figure>
  <div class="parallax-window responsive-parallax" data-parallax="scroll" data-image-src="/link/to/image.jpg"></div>
  <figcaption>...</figcaption>
</figure>

2. 编写JS逻辑监听视口变化，更新图片源：

// 定义各断点对应的图片链接
const parallaxImgMap = {
  large: '/link/to/image.jpg',
  medium: '/link/to/another/image.jpg',
  small: '/link/to/yet-another/image.jpg'
};

// 更新视差图片的函数
function refreshParallax() {
  const parallaxBox = document.querySelector('.responsive-parallax');
  if (!parallaxBox) return;

  let targetSrc;
  if (window.innerWidth >= 1000) {
    targetSrc = parallaxImgMap.large;
  } else if (window.innerWidth >= 800) {
    targetSrc = parallaxImgMap.medium;
  } else {
    targetSrc = parallaxImgMap.small;
  }

  // 先销毁旧实例，再重新初始化
  if (parallaxBox.parallaxInstance) {
    parallaxBox.parallaxInstance.destroy();
  }
  parallaxBox.setAttribute('data-image-src', targetSrc);
  $(parallaxBox).parallax();
}

// 初始化执行一次
refreshParallax();
// 监听窗口缩放事件
window.addEventListener('resize', refreshParallax);

3. 添加强制覆盖插件样式的CSS，确保图片自适应：

.parallax-window .parallax-slider {
  width: 100% !important;
}
.parallax-window .parallax-slider img {
  width: 100% !important;
  height: auto !important;
  visibility: visible !important;
}

方案二：小屏直接替换为静态图片 #

如果小屏不需要视差效果，用CSS媒体查询直接切换显示静态图：

1. 修改HTML，同时保留视差容器和静态图片：

<figure>
  <div class="parallax-window" data-parallax="scroll" data-image-src="/link/to/image.jpg"></div>
  <img class="parallax-static-fallback" src="/link/to/yet-another/image.jpg" alt="">
  <figcaption>...</figcaption>
</figure>

2. 编写媒体查询控制显示：

.parallax-static-fallback {
  display: none;
  width: 100%;
  height: auto;
}

/* 视口宽度小于800px时切换为静态图 */
@media (max-width: 800px) {
  .parallax-window {
    display: none;
  }
  .parallax-static-fallback {
    display: block;
  }
}

为什么之前的srcset写法无效？ #

parallax插件会隐藏你写的原图片，自动生成一张新的镜像图片插入DOM，这张新图片不会继承原图片的srcset属性，所以视口变化时根本不会触发图片切换。

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