在燈箱中顯示鏈接到完整尺寸圖像的縮略圖（沒有兩個單獨的圖像文件）

Question

我正在以標准HTML格式顯示數字圖像。 我不知道圖像的大小。 有些尺寸很小，但有些則很大。

<img src="image1.jpg">
<img src="image2.jpg">

我想做什么

1. 縮小圖像而不會扭曲圖像（如果寬度大於250px x 250px）。
2. 用戶應該能夠點擊圖片在燈箱中查看完整尺寸。

我看到了lightbox jQuery插件 ，但似乎需要單獨的縮略圖。 有沒有辦法利用這個優勢？

我使用的是最新的Chrome瀏覽器，因此該項目可以使用HTML5 / CSS3 / jQuery / etc。

Answer 1

一些建議：

每當需要處理縮略圖/全尺寸圖像時，都必須同時提供兩者，因為使用全圖像作為預覽會影響整體加載性能[考慮移動設備]。

如果您可以控制服務器，則可以考慮使用按需縮放功能 （例如PHP中的GD庫）或搶先緩存縮略圖 （更好和更具擴展性的選項）。

最后一兩件事： 你使用Chrome，認為會有人堅持與IE8左右，想想你的網站的觀眾，不僅是你的測試環境即可。