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-Framework并为图片周围的元素“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。

注意：您可能不希望将样式强加给所有＆lt; img＆gt;，因此明智地使用

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。

Bootstrap carousel：如何针对不同的屏幕分辨率使用不同尺寸的图像？

4 个答案: