调整屏幕大小时，在滑块动画期间，Bootstrap 4 轮播最后一个图像宽度保持比滑块宽度宽（不裁剪为滑块宽度）答案

【问题标题】：Bootstrap 4 carousel last image width remains wider than slider width (not cropping to slider width) during slider animation when screen is resized调整屏幕大小时，在滑块动画期间，Bootstrap 4 轮播最后一个图像宽度保持比滑块宽度宽（不裁剪为滑块宽度）
【发布时间】：2019-11-13 12:17:06
【问题描述】：

我在https://competent-lamport-72eab6.netlify.com/ 有一个引导 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 张幻灯片的过渡效果非常好，但 最后一张幻灯片似乎是第一个 幻灯片在再次滑回第一张幻灯片之前，幻灯片中图像的全宽。

这是一个带有图片的示例，有助于澄清问题：

我们去https://competent-lamport-72eab6.netlify.com/。
我们已将浏览器的大小调整为 400 像素。您将看到滑块加载了 375px 和 767px 屏幕宽度之间的 768px 图像。见下图：
前 2 张幻灯片很好地滑动。太好了！
这是屏幕宽度为 400 像素的第三张幻灯片：
这是 400px 幻灯片 div 中完整的 768px 大小的图像。
所以这里当它滑动时，不是将裁剪后的图像滑动到 400px，而是先一直滑动到 768px 的完整图像，并且在过渡中看起来像这样：

在返回第一张幻灯片之前。

所以这就是问题所在。它发生在沿途的每个断点。

这看起来非常笨拙。我想要解决这个问题。最后一张幻灯片应该像前两张幻灯片一样进行动画处理。请查看滑块并重新创建我的步骤以查看实际问题。

感谢您的帮助，

提前致谢。

【问题讨论】：

标签： css bootstrap-4 bootstrap-carousel

【解决方案1】：

我找到了轮播图像不裁剪为滑块宽度的解决方案。我通过将overflow: hidden; 添加到.carousel-item 解决了这个问题。

所以 html 保持不变。但是CSS已经添加了。

.carousel-item {
      overflow: hidden;
}

好东西！我希望这可以帮助任何查看引导轮播滑块图像溢出问题的人。

【讨论】：