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

【问题标题】：How can I display images as thumbnails using HTML/CSS?如何使用 HTML/CSS 将图像显示为缩略图？
【发布时间】：2015-06-02 21:39:18
【问题描述】：

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

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

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

【问题讨论】：

是的。但是您尝试过什么？
和“链接”是不行的，你应该在这里隔离你的代码。
当然，你可以使用<img src="fullimage.jpg" width="100" height="100">，但是你会强迫你的用户下载你的每一张大图。你会用 ram 的使用杀死他们的浏览器，用超额费用杀死他们的数据连接，等等......这就是为什么有小图像作为缩略图，而原始的大图像作为链接目标。
加载全尺寸图像作为缩略图实际上更糟糕......因为您将加载大的全尺寸图像苍蝇。加载小缩略图大小的图像是理想的，然后单击时，灯箱应向服务器请求大的全尺寸图像。

标签： html css

【解决方案1】：

您很可能需要缩略图而不是完整图像，因为加载完整图像需要更长的时间。 50 个缩略图，每张几 K，而 50 张全分辨率图像，每张几兆。不过我离题了。

这可以使用背景图片轻松完成。如果您创建一个 div、anchor、span 等任何您想要的内容，并设置background-image 属性以使用您的最终图像，那么您可以根据需要缩放和调整图像大小，它将切断您不使用的任何内容。作为额外的奖励，我不相信背景图像会停止页面加载，也不会导致布局出现故障，所以总而言之，它们工作得很好。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：