如何使用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;
}