[jQuery插件]图片居中裁切效果

同事啄米鸟前段时间分装的一个方法,见:http://blog.dmtuan.com/?p=486,改了一下做成jQuery插件:

大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表却是固定宽高的如图:

此脚本拟达到以下需求

  1. 当图片高或宽超过父容器时截取中间部分显示。
  2. 当图片宽高小于父容器时,居中显示。
  3. 插件中”width”和”height”两个参数可以设定图片实际输出的宽度。
  4. 可以通过样式设置图片的偏移位置,例如.themes2 li a img{ margin-top: -5px; margin-left: -5px};
  5. 第3点和第4点结合可以尽可能的解决一个问题,就是解决图片边缘模糊是造成视觉上的不爽。

demo页面:https://www.html.cn/demo/VMiddleImg/

 

赞(0) 打赏
未经允许不得转载:WEB前端开发 » [jQuery插件]图片居中裁切效果

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这个好啊,以前都是直接压缩的,变形很难看啊

    Cookalone7年前 (2011-11-29)回复
  2. #-48

    拿走 学习下 上面女的不错哦

    天外飞仙7年前 (2011-11-30)回复
  3. #-47

    在服务器上剪切成多个版本,然后客户端就请求相应的版本,这样可以减少不必要的传输及客户端的计算。

    bbl7年前 (2011-11-30)回复
    • @bbl, 一直是这么做的哦。客户端裁剪图片太不靠谱了。。

      sea09277年前 (2011-12-02)回复
    • @bbl,用的什么服务器端程序?试过服务器端缩放成很多版本,缩放以后效果很差

      shadyduan7年前 (2011-12-30)回复
  4. #-46

    http://www.cnblogs.com/noyobo/articles/2222098.html
    当时看到 啄米鸟做到,自己也写了个,同时加入鼠标滑过,预览的功能. 欢迎各位拍砖~

    noyobo7年前 (2011-12-01)回复
  5. #-45

    我想说……不懂怎么用哦!!

    wair7年前 (2011-12-01)回复
  6. #-44

    if (objHeight > objWidth) {***} else {*** }
    个人觉得可以改成
    if(objHeight/objWidth >parentHeight/parentWidth){****}else{****}
    这样更符合实际运用

    闲水小鱼7年前 (2011-12-06)回复
  7. #-43

    “分装”更改为“封装”

    pluwen7年前 (2011-12-13)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏