jqthumb.js缩略图插件-让缩略图正常显示而不变形
插件介绍
项目中有图片的时候，有的宽大于高，有的宽小于高，尤其在做图片列表的时候，经常发现缩略图会有变形的。我们怎样来解决这一问题呢。
方法一：用photoshop来处理缩略图。小的项目还可以，大的项目，这样做难免会累的半死；
方法二：用jqthumb.js这款插件，只需要写上几句话，就可以让我们的项目中的缩略图快速解决！
jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居 中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。
下载地址： http://pan.baidu.com/s/1jG5lT1W
简单使用
<!DOCTYPE html>
<html lang="en">
<body>
<div style="width: 800px; height: 800px;">
<img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
</div>
<div style="width: 200px; height:500px;">
<img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
</div>
<script src="jquery.js"></script>
<script type="text/javascript" src="jqthumb.min.js"></script>
<script type="text/javascript">
$(function () {
$('img').jqthumb({
classname: 'jqthumb',
width: '100%',
height: '100%',
position: {
x: '50%',
y: '50%'
},
source: 'src',
show: false,
responsive: 20,
zoom: 1,
method: 'auto',
after: function (imgObj) {
console.log(imgObj);
},
done: function (imgArray) {
for (i in imgArray) {
$(imgArray[i]).fadeIn();
}
}
});
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现