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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 3953 days ago, the information mentioned may be changed or developed.

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

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

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

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

前端

图片

样式

9 replies • 2015-08-07 22:53:59 +08:00

paloalto

Aug 7, 2015

从性能优化角度老说，不推荐直接把大尺寸图片缩放到小尺寸这种做法。
最好是输出多套尺寸的缩略图。
比如：
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

Aug 7, 2015

fancybox吧。。

paloalto

Aug 7, 2015

如果硬是要用前端来处理的话
<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; }

也有可能存在这种情况：