1.引入Jqthumb.js
在BootStrap中我们找不到解决办法,所以我们需要借助其它工具。Jqthumb插件是专门用来为图片生成缩略图的,它可以从图片中的任何坐标点开始取指定大小的图片区域作为图片的缩略图。你可以点击 https://github.com/pakcheong/jqthumb 来下载它,并将其应用到项目中(假设在当前项目中,jqthumb.js放置在scripts文件夹中):
2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图
DrawImage()函数正是基于jqthumb.js库的,注意该函数一定要写在轮换插件前,因为我们必须在图片加载前生成缩略图。DrawImage()函数代码如下:
<script type="text/javascript" src="/scripts/jqthumb.js"></script>
<script>
function DrawImage(hotimg)
{
$(hotimg).jqthumb({
classname : 'jqthumb',
width : '100%',//宽度
height : '300px',//高度
position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
zoom : '1',//缩放比例
method : 'auto',//提交方法,用于不同的浏览器环境,默认为‘auto’
});
}
</script>
在上述代码中,我们使用了jqthumb,并且传入了相关初始化参数。调用了该函数后,在图片加载的时候,就会按照上述参数产生图片的缩略图,从而解决图片变形问题。由于缩略图是从原始图片的正中间开始往两边取得,所以该缩略图包含了图片的主要内容。
记录,后续更新具体使用过程方法及实例