Question

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

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：width_you_want％; 这使得它取决于屏幕尺寸，宽度相对于屏幕尺寸。

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

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

2 个答案: