在做程序中遇到图片大小不规则或者图片须预览的情况是一个很让人头疼的问题,图片大小不规则,一般的控制方法就是限定死其容器的高度和宽度,但是这样的话,非与容器宽高等比的图片就会出现变形,而在作图时完全控制也是不可能的事,在做禾禾网站这个项目中就遇到了这样的一个难题,用户给的图片都是不规则不统一的图片,在产品预览时,程序中默认限制了容器高宽,造成了预览图变形的问题,这个问题也揪绕了我好久,后来仔细想,貌似通过css控制是做不到的,于是乎想到了用js控制,在网上搜索了一下关于图片自适应的资料,发现了一下要说的这个插件(说是插件,不如说是一个jquery方法而已),这个jquery方法仅仅用了60来行的代码便解决了图片自适应的难题

下面我来简单说一下这个插件的执行流程:

1、它是一个方法,名称叫做:resizeImg , 一般是在加载网页时便让图片执行该js方法

2、他有一个参数:opt,这是一个js数组参数,数组中包括两个键值,w与h,也就是宽和高

3、首先,它会遍历执行改方法的对象,例如,我们调用方式为:$(“.zhanshiul img”).resizeImg({w:200,h:200}),这样将遍历$(“.zhanshiul img”)这个对象

4、第二部,它将先对比图片的宽度,看其是否大于自适应的宽度,如果是则将其宽度变为我们限制的自适应宽度,然后将高度变为
图片高度* (限定宽度 / 实际宽度),将高度等比缩放

5、如果图片宽度小于限定宽度,则将对比图片的高度,看是否大于限定高度,如果大于,则将高度变为限定的高度,然后将宽度变为
图片宽度* (限定高度 / 实际高度),将宽度等比缩放

6、最后一步,实现图片在容器内居中,这个将有css控制,于是最后我们将设置图片填充容器外左边距的距离为:设定宽度- 图片宽度) / 2
填充容器外顶部距离为:设定高度- 图片高度) / 2,js代码为:

$(this).css({
“margin-left” : (opts[“w”] – imgWidth) / 2 ,
“margin-top” : (opts[“h”] – imgHeight)/2
});

就这样,便实现了一个图片自适应的过程,当然这个js也不是对所有图片都适应,因为js执行是需要时间的,当执行时间长一点时,将会造成先看到原图,然后再看到图片缩小这样的效果,影响了产品美观,那么,什么原因会造成js执行很慢呢?当然网速是一个问题,再者,就是我们需要执行的对象,图片不能为太大的图片,如果图片太大,会造成媒体加载很慢,更别说js加载了,说到这里,其实个人觉得最好的控制图片的方法是我们在作图时即注意图片比例,这样便可直接用css控制即可,既省了js,也可使页面更好看。