这是一个创建于 3424 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在调整自己博客的样式，但不怎么懂前端的知识。
在图片显示的时候希望实现这样的效果：因为图片一般分辨率比较高，直接全尺寸显示的话整个页面布局就乱掉了，所以需要一些样式代码让默认情况下图片显示的时候是一个缩略图，点击图片以后全尺寸的图片能跳出来。
我估计有一些现成的框架可以做这个事情，但我去搜索了一下关键词写不对所以不得要领，这才来这里请教一下，能给一些关键词就可以了，非常感谢！
另外顺便问问有没有方便的命令行图片压缩工具。再次感谢！
在图片显示的时候希望实现这样的效果：因为图片一般分辨率比较高，直接全尺寸显示的话整个页面布局就乱掉了，所以需要一些样式代码让默认情况下图片显示的时候是一个缩略图，点击图片以后全尺寸的图片能跳出来。
我估计有一些现成的框架可以做这个事情，但我去搜索了一下关键词写不对所以不得要领，这才来这里请教一下，能给一些关键词就可以了，非常感谢！
另外顺便问问有没有方便的命令行图片压缩工具。再次感谢！
 |
1
paloalto 2015-08-07 10:44:09 +08:00  1
|
 |
2
TakanashiAzusa 2015-08-07 10:44:44 +08:00 1
fancybox吧。。
|
|
3
paloalto 2015-08-07 11:00:12 +08:00 1
如果硬是要用前端来处理的话
<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 |
|
4
paloalto 2015-08-07 11:04:56 +08:00 1
啊 发现刚没理解楼主的意思。
fancybox: http://fancyapps.com/fancybox/ lightbox: http://lokeshdhakar.com/projects/lightbox2/ Lightbox for Bootstrap 3: https://github.com/ashleydw/lightbox |
 |
5
Perry 2015-08-07 11:07:55 +08:00 via iPhone 1
photoswipe.js
|
 |
6
kevinyoung OP @paloalto 非常感谢
|
 |
7
loddit 2015-08-07 12:28:30 +08:00
这个是 tinypng 背后的工具 https://pngquant.org/ 很厉害。
|
 |
8
dslwind 2015-08-07 21:33:53 +08:00 via Android
fancybox 吧
|
 |
9
OpooPages 2015-08-07 22:53:59 +08:00 via Android
用过fancybox和lightbox，比较喜欢fancybox
|
Select Language