我在https://competent-lamport-72eab6.netlify.com/有一个bootstrap 4传送带滑块。

滑块有3个幻灯片。但是，为了优化页面速度，我提供了5张不同大小的图像，这些图像会在特定的屏幕宽度下加载。我已经使用<picture>和<srcset>来做到这一点。

请参见下面的代码：

<div class="carousel-item">
 <picture>
    <source class="lazy" srcset="img/carousel/great-wall44-375.jpg" media="(max-width: 375px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-768.jpg" media="(max-width: 768px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1200x514.jpg" media="(max-width: 1200px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1400x514.jpg" media="(max-width: 1400px)" >  
    <source class="lazy" srcset="img/carousel/great-wall44-1920x902-low.jpg" media="(max-width: 1920px)" >
    <img class="lazy" src="img/carousel/great-wall44.jpg" data-src="img/carousel/great-wall44-new5.jpg" >
 </picture>
</div>

如您所见，我在各自的断点处加载了各种图像：375px，768px，1200px，1400px和1920px。但是，这非常出色。

问题

调整页面大小（或在小型设备上看到）时，前2张幻灯片的过渡非常好，但是最后一张幻灯片似乎先将幻灯片更改为幻灯片中图像的全宽度，然后再次滑动回第一张幻灯片。

下面是一个带有图片的示例，可以帮助您阐明问题：

1. 我们去https://competent-lamport-72eab6.netlify.com/。

2. 我们已经将浏览器的大小调整为400px。您将看到滑块加载了375px至767px屏幕宽度之间的768px图像。参见下图：

   

3. 前2张幻灯片很好地滑动。太好了！

4. 这是400px屏幕宽度的第三张幻灯片：

   

5. 这是400px幻灯片div中完整的768px尺寸的图像。

   

6. 因此，在此处滑动时，它不是将裁剪后的图像滑动到400px，而是首先一直滑动到768px的完整图像，并且在过渡时看起来像这样：

   

，然后回到第一张幻灯片。

这就是问题所在。它发生在过程中的每个断点。

这看起来令人难以置信。我想要解决此问题。最终的幻灯片应该像前两张幻灯片一样进行动画处理。请查看一下滑块，然后重新创建我的步骤，以查看实际发生的问题。

非常感谢您的帮助，

谢谢。