如何为不同宽度的屏幕设置不同的图像源？答案

【问题标题】：how to set different image sources for different widths of the screen?如何为不同宽度的屏幕设置不同的图像源？
【发布时间】：2014-07-09 17:24:45
【问题描述】：

我有一个问题：如果屏幕宽度小于 1024px，我需要显示 JPG 图片和 GIF 视频，如果屏幕尺寸更大。

技巧#1：应该只下载其中一个。技巧2：不能是css背景属性，因为图片来源是服务器上目录的随机内容。技巧 #3：服务器语言是 php。

【问题讨论】：

#2 似乎不是问题，您可以在页面顶部编写 css - 如有必要，使用 php。究竟是什么问题？
为什么有人会在不发表评论的情况下投反对票？
我想由于缺乏 OP 方面的努力证据，它被否决了。
我为 wordpress 制作了一个带有插件控制的模板。您不能只将您想要的所有内容放在页面模板的标题中。

标签： php html media-queries

【解决方案1】：

如果您可以使用 JQuery 来确定要加载哪个图像，您可以试试这个。

在你的 PHP 中像这样设置图像：

<img data-jpg="img-url-1.jpg" data-gif="img-url-2.gif" />

每个图像的路径在标签中定义为数据属性

然后让您的 JQuery 在 DOM 加载后运行并确定屏幕大小。根据该值，将<img /> 的src 属性设置为适当的URL。

$(function(){
    if($('body').width() > 1024) { $('img').attr("src", $('img').attr("data-jpg")); } 
    else { $('img').attr("src", $('img').attr("data-gif")); }
});

工作示例：JSFiddle

【讨论】：

这看起来很有用，非常感谢，将在我的项目中测试它。

【解决方案2】：

picture 元素可以让您做到这一点 (WHATWG spec)。

<picture>
    <source srcset="examples/images/large.gif" media="(min-width: 1024px)">
    <source srcset="examples/images/default-small.jpg">
    <img src="examples/images/default-small.jpg">
</picture>

截至 2014 年 7 月，它仅在 beta builds of browsers 中。但是您可以使用 polyfill（即一些 JavaScript 来模拟不受支持的浏览器中的元素）：参见 Picturefill

请注意，img 不仅是一种备用，而且始终是必需的：source 元素只是为 img 元素提供替代来源。有关详细信息，请参阅例如 this guide。

【讨论】：

浏览器下载 img src 中的所有内容怎么样？
如果您使用 Picturefill 将 <img src= 替换为 <img srcset=，则浏览器不会下载它。支持 srcset 的浏览器无论如何都只会下载一个。
最后我们有 img src 作为后备，所以无论如何下载后备......还是不？