基于JavaScript的分辨率为不同设备提供不同尺寸的图像

示例： 本网站是一个很好的例子。

第1步：在一个选项卡中

• 只需加载页面
• 查看最右列中的任何图像。 你会发现它们的分辨率是638×368

第2步：打开一个新选项卡，然后……

• 加载页面并打开Firebug或开发人员工具（ F12 ）
• 转到网络 （或网络 ）选项卡
• 调整浏览器大小并重新加载页面
• 再次最大化浏览器窗口
• 查看最右列中的任何图像。 你会发现它们的分辨率是356×205

显然这是一些JavaScript / jQuery技巧（+其他一些技术），因为如果你检查最右边列中的任何图像，你会看到如下代码：

…如果您view-source页面view-source ，则不存在。 有没有一个开源的JavaScript库，可以做这样的事情？

我们称之为什么？ 自适应图像 ？

我想问的简单明了的问题是……是否可以根据浏览器的视口大小或屏幕分辨率为不同设备提供不同尺寸的图像？

Answer 1

最好的答案是，现在可以在没有javascript的情况下实现这一点

将来， 元素正是将要使用和需要的元素。 它的HTML如下所示

这基本上与下面的技术相同，但是编写它的forms变得更容易，并且它用于img而不是background-image 。 在撰写此答案时，我们可以使用polyfill来使用此格式或@media查询

CSS2媒体类型引入了@media查询，它允许我们根据视口维度和其他许多内容影响页面的不同样式。 这使我们只有在需要时才能将更大的图像作为背景图像提供。 其用途的一个例子如下

 .myImg { background-image:url(myurlSmall.png); } /* Start with smallest */ /* Serve larger image only if needed */ @media (min-width:400px) { .myImg { background-image:url(myurlMedium.png); } } @media (min-width:1200px) { .myImg { background-image:url(myurlLarge.png); } } /* etc. */