猫头鹰旋转木马在手机上显示了不同的图像

Question

我一直在使用谷歌的PageSpeed Insights来了解如何改进我的网站，我得到的要点是我的图像对于移动用户来说太大了。目前我使用的是我使用的模板附带的猫头鹰旋转木马。

谷歌自动为我提供了调整大小的图像，但我不知道如何在旋转木马中实现这些图像。我试过类似的东西https://github.com/teleject/hisrc但在尝试了多种方法后，它只是不断地完全删除图像。

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

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

这是我的旋转木马：

(需要style="position: relative"，以便铬用户的菜单保持在图像顶部)

<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