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

Question

我希望标题不会太困惑。

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

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

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

1. 提供缩放图像
2. 如果人们想要保存原件，请提供原件

Answer 1

来自自适应图像网站:

It creates and manages its own resized images using your "existing images as the source," and it will adapt to the same resolution brackets your site does with the CSS3 @media queries used in your Responsive Design.

您的图像仍然是“来源”，它只是调整它们以供查看。尝试下载图像并查看属性。它将保留原始尺寸，I've linked a jsFiddle demonstrating how @media queries work .如果缩小屏幕并尝试下载图像，您将在适当缩放时看到“原始”属性。

@媒体查询:

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