css - 响应式图像，在移动设备上提供小型服务，可下载为原始图像

Question

我希望标题不会太混乱。

我正在使用自适应图像来检测访问者的屏幕大小，并自动创建、缓存和提供网页嵌入 HTML 图像的设备/断点适当的重新缩放版本。

现在......有些人想将图像保存在他们的手机/智能手机上，但是使用自适应图像来提供更小尺寸的图像（以节省带宽/下载时间）会给他们提供更小尺寸的图像 - 而不是大小合适的图像或原始图像图片。

有人对以下内容有任何想法吗？

1. 提供放大的图像
2. 如果人们想保存它们，可以使用原件

Answer 1

从自适应图像网站：

它使用您的“现有图像作为源”创建和管理自己调整大小的图像，并且它将适应您的站点使用响应式设计中使用的 CSS3 @media 查询所做的相同分辨率括号。

您的图像仍然是“来源”，它只是调整它们以供查看。尝试下载图像并查看属性。它将保留原始尺寸，我链接了一个 jsFiddle，演示了 @media 查询的工作原理。如果您缩小屏幕并尝试下载图像，您将在适当缩放时看到“原始”属性。

@媒体查询：

@media screen and (max-width: 480px) {
  #lincoln img {
    height: 100px;
    width: 150px;
  }
}