如何使用HTML / CSS将图像显示为缩略图？

Question

目前这是我的网站： jaykasten.com

我在网格中有缩略图，可链接到灯箱中的完整图像。 现在，我的网站加载了缩略图和完整图像。

是否可以使用完整图像文件并选择其中一部分显示为缩略图，以避免不得不加载多余的缩略图？ 最好只使用HTML和CSS。

Answer 1

您最可能希望使用缩略图而不是完整图像，因为完整图像的加载时间会更长。 50张缩略图（每张K数）与50张全分辨率图片（每张Meg）。 但是我离题了。

使用背景图像可以轻松完成此操作。 如果创建div，anchor，span以及任何所需的内容，然后将background-image属性设置为使用最终图像，则可以按需缩放图像的大小和大小，如果不使用，它将被截断。 另外，我认为背景图片不会停止页面加载，也不会引起布局故障，因此总的来说，它们效果很好。

但是，我仍然建议仅以高分辨率下载用户想要的内容，因为否则会增加页面的加载时间。 您还可以查看类似https://github.com/teleject/hisrc或http://en.wikipedia.org/wiki/Lazy_loading之类的内容 。 这两种方法中的任何一种都可能比在页面加载时加载所有高分辨率图像更可取。

Answer 2

使用CSS background-clip和background-origin 。 像这样：

#element{
  background-clip: content-box;
  background-origin: content-box;
}