jqthumb.js缩略图插件-缩略图正常显示而不变形

       项目中有图片的时候,有的宽大于高,有的宽小于高,尤其在做图片列表的时候,经常发现缩略图会有变形的。我们怎样来解决这一问题呢。

       本来想要等比例显示图片的,可是如果遇到是上传本地的图片的时候,大小更是不一样,等比例显示也会使图片打不到我们想要的效果。

jQuery创建缩略图插件jQThumb

jqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图,该插件可以通过计算来在老浏览器上生成响应式效果。 在老的浏览器中它能够替代background-size属性。
jQThumb 兼容所有浏览器。可以工作在所有现代浏览器甚至是IE6+上,jQuery 1.3以上版本即可运行。它还可以在Zepto(通过zepto-data插件)v1.1.3+上运行。

这个jquery插件可以帮助我们按比例生成图片缩略图。大家可能知道在处理缩略图的时候使用 background-size: cover; 可以解决许多棘手问题。但是 background-size: cover; 在IE6、IE7和IE8下不能正常工作。而该插件正是弥补了这个缺陷。在高级浏览器中使用背景方式实现,并设置图片的尺寸(background-size)和位置(background-position)实现居中;在 IE6 等老旧的浏览器中使用图片的方式实现,并使用绝对定位和 margin 实现居中

一.简单使用

1.图片中添加类example3:

2.引入插件:

3.调用方法:

$('.example3').jqthumb({
	    classname      : 'jqthumb',
	    width          : 100,
	    height         : 200,
	    showoncomplete : true
	});

二.是适应频幕




	
	
	上傳圖片
	
	
	
	
	
	
	
	
	
	
	
	
	












jqthumb.js缩略图插件-缩略图正常显示而不变形_第1张图片


注意:$(window).resize(function () {}) 是:当调整浏览器窗口的大小时,发生 resize 事件。 监听事情

这边会有一个问题“会闪”,这个问题是因为双重监听导致的影响。



你可能感兴趣的:(框架/插件使用)