求个前端显示图片的代码片段

[kevinyoung]

最近在调整自己博客的样式，但不怎么懂前端的知识。

在图片显示的时候希望实现这样的效果：因为图片一般分辨率比较高，直接全尺寸显示的话整个页面布局就乱掉了，所以需要一些样式代码让默认情况下图片显示的时候是一个缩略图，点击图片以后全尺寸的图片能跳出来。

我估计有一些现成的框架可以做这个事情，但我去搜索了一下关键词写不对所以不得要领，这才来这里请教一下，能给一些关键词就可以了，非常感谢！

另外顺便问问有没有方便的命令行图片压缩工具。再次感谢！

[paloalto]

从性能优化角度老说，不推荐直接把大尺寸图片缩放到小尺寸这种做法。
最好是输出多套尺寸的缩略图。
比如：
http://77fmtb.com1.z0.glb.clouddn.com/gogopher.jpg?imageMogr2/thumbnail/!25p
http://77fmtb.com1.z0.glb.clouddn.com/gogopher.jpg?imageMogr2/thumbnail/!75p
http://77fmtb.com1.z0.glb.clouddn.com/gogopher.jpg

[TakanashiAzusa]

fancybox吧。。

[paloalto]

如果硬是要用前端来处理的话
<img class="thumb" src="http://77fmtb.com1.z0.glb.clouddn.com/gogopher.jpg" alt="" />

css：
.thumb { max-width: 100%; width: 300px; }
或者
.thumb { max-height: 100%; height: 300px; }


以上两种分别对应以宽度为基准等比缩放、以高度为基准等比缩放，属于比较简单的应用场景，用哪个看具体需求而定。

也可能是宽高比一致的: .thumb { width: 300px; height: 300px; }

也有可能存在这种情况：

这时候就需要用 js 来计算图片大小，之前 kejun 写过一个 demo： http://hikejun.com/demo/photo_layout/layout1.html

[paloalto]

啊 发现刚没理解楼主的意思。

fancybox: http://fancyapps.com/fancybox/
lightbox: http://lokeshdhakar.com/projects/lightbox2/
Lightbox for Bootstrap 3: https://github.com/ashleydw/lightbox

[Perry]

photoswipe.js

[kevinyoung]

@paloalto 非常感谢

[loddit]

这个是 tinypng 背后的工具 https://pngquant.org/ 很厉害。

[dslwind]

fancybox 吧

[OpooPages]

用过fancybox和lightbox，比较喜欢fancybox