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

最新推荐文章于 2022-12-02 17:01:40 发布

面条请不要欺负汉堡

最新推荐文章于 2022-12-02 17:01:40 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：框架/插件使用文章标签： jqthumb.js缩略图插件缩略图正常显示而不变形

本文链接：https://blog.csdn.net/gao_xu_520/article/details/72875136

框架/插件使用专栏收录该内容

32 篇文章

订阅专栏

jQThumb是一款jQuery插件，用于生成响应式的图片缩略图。它可以在各种浏览器环境中保持图片不变形，并且在老版浏览器中也有良好的兼容性。本文介绍了如何使用此插件并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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：<img class="example3" src="uploads/1.png">

2.引入插件：<script type="text/javascript" src="themes/js/jqthumb.js"></script>

3.调用方法：

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

二.是适应频幕

<!doctype html>
<html class="no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>上傳圖片</title>
	<meta name="description" content="">
	<meta name="keywords" content="gallery">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="themes/images/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="Amaze UI" />
	<link rel="stylesheet" href="themes/amaze1.0.0/amazeui.min.css"/>
	<link rel="stylesheet" href="themes/amaze1.0.0/font-awesome.css"/>
	<style type="text/css">
		.zn-uploadphotos-list img{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
<ul class="zn-uploadphotos-list  am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-8 am-gallery-default  am-no-layout" id="Gallery">
	<li>
		<img src="uploads/img2.jpg" alt="图片1">
	</li>
	<li>
		<img src="uploads/img3.jpg" alt="图片1">
	</li>
	<li>
		<img src="uploads/img6.jpg" alt="图片1">
	</li>
</ul>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="themes/amaze1.0.0/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="themes/js/jquery-1.7.2.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="themes/amaze1.0.0/amazeui.min.js"></script>
<script type="text/javascript" src="themes/js/jqthumb.js"></script>
<script type="text/javascript">
	$(function(){
        images();
        $(window).resize(function () {
           images();
        })
    });
	function images(){
		var imgWidth=$('#Gallery>li').width();
		$('#Gallery img').jqthumb({
		    classname      : 'jqthumb',
		    width          : imgWidth,
		    height         : imgWidth,
		    showoncomplete : true
		});
	}
</script>
</body>
</html>