Owl 轮播在移动设备上显示不同的图片

Question

我一直在使用 google 的 PageSpeed Insights 来了解如何改进我的网站，我得到的主要观点是我的图片对于移动用户来说太大了。目前我正在使用 owl-carousel，它与我正在使用的模板一起提供。

Google 自动为我提供了调整大小的图像，但我不知道如何将它们应用到轮播中。我尝试了 https://github.com/teleject/hisrc 之类的方法，但在以多种方式尝试之后，它一直在完全删除图像。

有人知道如何根据屏幕大小自动更改源吗？

例如在桌面上我显示 mainimage.jpg 如果屏幕变小我想显示 mainimage-mobile.jpg 而不是仅仅调整它的大小。

这是我的旋转木马：

（style="position: relative" 是为了让 chrome 用户的菜单保持在图像的顶部）

<div class="line animated fadeIn "style="position: relative">
    <div class=" s-12 l-9 center cushycms" style="position: relative">
        <div id="owl-demo" class="owl-carousel owl-theme  margin-bottom">
        <div class="item" style="position: relative"><img style="position: relative" src="img/image1.jpg" alt="image"></div>
        <div class="item" style="position: relative"><img style="position: relative" src="img/image2.jpg" alt="image"></div>
        <div class="item" style="position: relative"><img style="position: relative" src="img/image3.jpg" alt="image"></div>
        <div class="item" style="position: relative"><img style="position: relative" src="img/image4.jpg" alt="image"></div>
        <div class="item" style="position: relative"><img style="position: relative" src="img/image5.jpg" alt="image"></div>
        </div>
    </div>
 </div>

不确定这是否有帮助，但这是我正在使用的模板http://www.myresponsee.com/

Answer 1

您可能正在寻找宽度：width_you_want%；这使得它取决于屏幕尺寸，宽度是相对于屏幕尺寸的。

文档： https://developer.mozilla.org/en-US/docs/Web/CSS/width

Answer 2

您可以使用 <picture> 元素，而不仅仅是 <img>。

例如：

<picture>
    <source srcset="mainimage-mobile.jpg" media="(max-width: 640px)">
    <img srcset="mainimage.jpg">
</picture>

在上面的代码中使用了默认的 mainimage.jpg，但是一旦屏幕变窄，浏览器会自动使用 641px - mainimage-mobile.jpg。

这种方法的唯一问题可能是浏览器支持 http://caniuse.com/#search=picture. But on the other hand, you could also include a javascript polyfill. https://github.com/scottjehl/picturefill

Owl 轮播在移动设备上显示不同的图片

Owl carousel show a different image on mobile

html

owl-carousel