Bootstrap 轮播：如何为不同的屏幕分辨率使用不同尺寸的图像？

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>

希望对你有帮助;)

Answer 2

实际上，当您调整窗口大小时，轮播不应该降低高度以适应不断变化的宽度。这会扭曲页面的视图。这是引导轮播的特点。

关于响应性，当您在小型设备中加载页面时（我的意思是在桌面浏览器中不调整大小），您将看到相关的幻灯片图像无论如何都只会加载。我认为这应该适合你。

---

但是，如果您需要在宽度减小时调整图像的高度，您可以使用 CSS 来实现

img{
  width: 100%;
}

有关信息，请参阅此codepen。

注意：您可能不想将样式强加给所有 ，所以要明智地使用

Answer 3

只需创建一个 css 类并按如下方式使用它：

.fitImage {
    width: 100%;
    box-sizing:border-box;
}

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

Answer 4

我是这样做的：

<div class="carousel slide d-none d-sm-block" data-ride="carousel" data-interval="4000" data-pause="hover">
  <div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
    <div class="carousel-item active" style="cursor: default;">
      <img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/autoskola.jpg" alt="" src="/images/carousel/autoskola.jpg">
      <div class="carousel-caption">
        <p class="welcome_message"></p>
        <p class="slogan"></p>
      </div>
    </div>
  </div>
</div>
<div class="carousel slide d-block d-sm-none" data-ride="carousel" data-interval="4000" data-pause="hover">
  <div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
    <div class="carousel-item active" style="cursor: default;">
      <img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/baner-mobilni.jpg" alt="" src="/images/carousel/baner-mobilni.jpg">
      <div class="carousel-caption">
        <p class="welcome_message"></p>
        <p class="slogan"></p>
      </div>
    </div>
  </div>
</div>

所以使用 d-none d-sm-block 和 d-block d-sm-none 将隐藏/显示特定屏幕尺寸的轮播，使用 lsrc 我将禁用加载图像，请注意我会将其重命名为 src javascript。