同事啄米鸟前段时间分装的一个方法,见:,改了一下做成jQuery插件:
大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表却是固定宽高的如图:
此脚本拟达到以下需求
- 当图片高或宽超过父容器时截取中间部分显示。
- 当图片宽高小于父容器时,居中显示。
- 插件中”width”和”height”两个参数可以设定图片实际输出的宽度。
- 可以通过样式设置图片的偏移位置,例如.themes2 li a img{ margin-top: -5px; margin-left: -5px};
- 第3点和第4点结合可以尽可能的解决一个问题,就是解决图片边缘模糊是造成视觉上的不爽。
demo页面:https://www.7psus5.com/demo/VMiddleImg/
这个好啊,以前都是直接压缩的,变形很难看啊
拿走 学习下 上面女的不错哦
在服务器上剪切成多个版本,然后客户端就请求相应的版本,这样可以减少不必要的传输及客户端的计算。
@bbl, 一直是这么做的哦。客户端裁剪图片太不靠谱了。。
@bbl,用的什么服务器端程序?试过服务器端缩放成很多版本,缩放以后效果很差
当时看到 啄米鸟做到,自己也写了个,同时加入鼠标滑过,预览的功能. 欢迎各位拍砖~
我想说……不懂怎么用哦!!
if (objHeight > objWidth) {***} else {*** }
个人觉得可以改成
if(objHeight/objWidth >parentHeight/parentWidth){****}else{****}
这样更符合实际运用
“分装”更改为“封装”