Question

如我们所知，我们可以使用服务网址从blobstore提供图片，并附加=sXX以指示图片的宽度：

<!-- serving an image of 600px width -->
<img src="{{serving_url}}=s600" alt=""/>

这很有效，除了我们希望为较小的屏幕提供较小的图像，这是出于明显的webperf原因。我们如何根据屏幕尺寸提供不同的图像宽度？

感谢您的任何提示。

Answer 1

您可以使用javascript轻松完成此操作，基本技巧是在评估您感兴趣的媒体查询后更改src属性。

对于初学者，我会避免在评估之前填充图像的src，因此默认情况下不会加载完整图像;像这样的东西：

<img data-src="{{serving_url}}" height="240" width="320">

这里我们在数据属性中呈现了url，因此我们稍后可以在脚本中访问它。我还添加了默认大小，因此保留了空间，但当然这是可选的。

现在，我们可以使用Window.matchMedia()来评估我们的查询字符串：

var mql = window.matchMedia('(max-device-width: 667px)')
if (mql.matches) {
    // we're probably running on an iPhone6!
    img.src = img.dataset.src + '=s667'
}

使用完美尺寸拍摄图像！

我包含一个工作代码段，可以轻松扩展以进行许多查询测试，供您尝试。

var img = document.querySelector('img')
  , mql = window.matchMedia('(max-device-width: 667px)')
  , size = 1200
if (mql.matches) {
    size = 667
}
img.src = img.dataset.src + '=s' + size

img {
    object-fit: contain;
}

<img
    data-src="http://lh4.ggpht.com/TgjDT-cPRr6bjrpSVQeILk93o4Ouzjo1ygMB6KpmnCHhyH5vJKKRrqxCD2bC3T09CRIP6h5QFsV_l0hnhio5bN7z"
    height="240"
    width="320"
    >

测试图像由this question友好地“提供”。我也在使用object-fit，因为它对我来说很有意义。

GAE + Blobstore：根据视口宽度提供不同的图像大小

1 个答案: