猫头鹰轮播在移动设备上显示不同的图像

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

您可以使用<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。但另一方面，您也可以包含一个 javascript polyfill。 https://github.com/scottjehl/picturefill

Answer 2

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

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