bootstrap中关于缩略图大小不一

1.引入Jqthumb.js

Jqthumb插件是专门用来为图片生成缩略图的,

它可以从图片中的任何坐标点开始取指定大小的图片区域作为图片的缩略图。

点击 https://github.com/pakcheong/jqthumb 来下载,并将其应用到项目中(假设在当前项目中,jqthumb.js放置在scripts文件夹中):


2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图

DrawImage()函数正是基于jqthumb.js库的,注意该函数一定要写在轮换插件前,因为我们必须在图片加载前生成缩略图

DrawImage()函数代码如下:


  1. <script>
  2. function DrawImage(hotimg)
  3. {
  4. $(hotimg).jqthumb({
  5. classname : 'jqthumb',
  6. width : '100%',//宽度
  7. height : '300px',//高度
  8. position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
  9. zoom : '1',//缩放比例
  10. method : 'auto',//提交方法,用于不同的浏览器环境,默认为‘auto’
  11. });
  12. }
  13. </script>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值