在灯箱中显示链接到完整尺寸图像的缩略图（没有两个单独的图像文件）

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左右，想想你的网站的观众，不仅是你的测试环境即可。