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

【问题标题】：GAE + Blobstore: Serve different image size depending on viewport widthGAE + Blobstore：根据视口宽度提供不同的图像大小
【发布时间】：2015-07-03 14:54:16
【问题描述】：

我们知道，我们可以使用 blobstore 的 服务 url 来提供图像，并附加 =sXX 以指示图像的宽度：

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

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

感谢任何提示。

【问题讨论】：

标签： javascript html image google-app-engine blobstore

【解决方案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'
}

使用完美尺寸获取图像！

我包含了一个有效的 sn-p，它可以很容易地扩展为许多查询测试供您尝试。

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，因为它很有意义（对我来说）。

【讨论】：