• 请不要在回答技术问题时复制粘贴 AI 生成的内容
kevinyoung
V2EX  ›  程序员

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

  •  
  •   kevinyoung · Aug 7, 2015 · 4037 views
    This topic created in 4112 days ago, the information mentioned may be changed or developed.
    最近在调整自己博客的样式,但不怎么懂前端的知识。

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

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

    另外顺便问问有没有方便的命令行图片压缩工具。再次感谢!
    9 replies  •  2015-08-07 22:53:59 +08:00
    paloalto
    paloalto
    Aug 7, 2015❤️1
    1
    从性能优化角度老说,不推荐直接把大尺寸图片缩放到小尺寸这种做法。
    最好是输出多套尺寸的缩略图。
    比如:
    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
    TakanashiAzusa
    Aug 7, 2015❤️1
    2
    fancybox吧。。
    paloalto
    paloalto
    Aug 7, 2015❤️1
    3
    如果硬是要用前端来处理的话
    <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
    paloalto
    Aug 7, 2015❤️1
    4
    啊 发现刚没理解楼主的意思。

    fancybox: http://fancyapps.com/fancybox/
    lightbox: http://lokeshdhakar.com/projects/lightbox2/
    Lightbox for Bootstrap 3: https://github.com/ashleydw/lightbox
    Perry
    Perry
    Aug 7, 2015 via iPhone❤️1
    5
    photoswipe.js
    kevinyoung
    kevinyoung
    OP
    Aug 7, 2015
    6
    @paloalto 非常感谢
    loddit
    loddit
    Aug 7, 2015
    7
    这个是 tinypng 背后的工具 https://pngquant.org/ 很厉害。
    dslwind
    dslwind
    Aug 7, 2015 via Android
    8
    fancybox 吧
    OpooPages
    OpooPages
    Aug 7, 2015 via Android
    9
    用过fancybox和lightbox,比较喜欢fancybox
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4622 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 02:36 · PVG 10:36 · LAX 18:36 · JFK 21:36
    ♥ Do have faith in what you're doing.