css - Bootstrap 轮播 : How can I use different-size images for different screen resolutions?

Question

出于性能原因，我想在轮播幻灯片时为桌面设备使用大尺寸图像，为移动设备使用较小尺寸的图像。

我尝试了以下代码，但只取得了有限的成功:

<picture>
   <source srcset="images/s2.jpg" media="(min-width: 768px)">
   <source srcset="images/s2m.jpg">
   <img class="second-slide" srcset="images/s2m.jpg" alt="2">
</picture>

其中 s2m.jpg 是默认(小)图像，而 s2.jpg 是较大的图像。

轮播可以工作并根据屏幕尺寸选择正确的图像，但会失去原有的响应能力。也就是说，幻灯片的大小不会调整为父元素 (.item) 的宽度。相反，它们只是被裁剪了。

实现此目标的正确方法是什么？

Answer 1

在我看来，这个问题可以通过 HiSRC 框架来解决 - https://github.com/teleject/hisrc .然后，您可以使用 -Tag 中的属性 data-1x 或 data-2x 来定义其中的不同大小的图像源:

例如:

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>

并在您的脚本中插入以下 jQuery 代码以“激活”HiSRC 框架并为图片周围的元素赋予类“hisrc”:

    $(document).ready(function(){
  $(".hisrc img").hisrc();
  $(".hisrc img+img").hisrc({
    useTransparentGif: true,
    speedTestUri: '50K.jpg'
  });
})

---

<div class="hisrc">
   <img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
</div>

希望对您有所帮助;)