《Bootstrap轮播插件中图片变形的终极解决方案 用法jqthumb.js_.docx》由会员分享，可在线阅读，更多相关《Bootstrap轮播插件中图片变形的终极解决方案 用法jqthumb.js_.docx（5页珍藏版）》请在三一文库上搜索。
1、Bootstrap轮播插件中图片变形的终极解决方案 用法jqthumb.js_ 这篇文章主要介绍了Bootstrap轮播插件中图片变形的终极解决方案，用法jqthumb.js，感爱好的小伙伴们可以参考一下 在顶求网的首页中我用法了BootStrap的轮播（carousel）插件来展现文章中的图片。我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片，由于文章的图片大小不一，而轮播插件的大小基本是固定的，所以展现的时候图片消失了变形。在网上找了许多中方式也没有解决(过程曲折，不再赘述)，直到找到了这款Jquery的缩放插件jqthumb.js.下面来看看如何用法它以及如何利用它来掌握轮
2、播控件中图片的大小，而且能够做到不变形，可以显示图片的主要部分（类似于微信伴侣圈的图片混排效果不知道大家有没有留意，在微信伴侣圈中无论你发的图片的比率是什么，总能够被完善的排列，而不会发生变形）。首先我们看看Bootstrap的Carousel的html代码： div id=carousel-example-generic class=carousel slide data-ride=carousel !- Wrapper for slides - div class=carousel-inner role=listbox div class=item active a href=包含图片一文
3、章路径 img src=图片一路径 alt=图片一 onload=DrawImage(this)/a div class=carousel-caption h4 class=alpha a style=color:white; href=包含图片一文章路径图片一标题/a /h4 /div /div div class=item a href=包含图片二文章路径 img src=图片二路径 alt=图片二 onload=DrawImage(this)/ /a div class=carousel-caption h4 class=alpha a style=color:white; href=包
4、含图片二文章路径图片二标题/a /h4 /div /div div class=item a href=包含图片三文章路径 img src=图片三路径 alt=图片三 onload=DrawImage(this)/ /a div class=carousel-caption h4 class=alpha a style=color:white; href=包含图片三文章路径图片三标题/a /h4 /div /div /div 由上述代码可以看到，每个图片（img）在加载（onload）的时候都调用了一个函数DrawImage,在这个函数中我们就可以调用jqthumb.js的方法来掌握图片的大小
5、了，留意该函数肯定要加在上述HTML代码前，否则第一次加载的时候掌握图片大小会失败（由于页面加载时序的缘由），函数代码如下： !-导入插件- script type=text/javascript src=/static/plugins/thumb/js/jqthumb.js/script script function DrawImage(hotimg) $(hotimg).jqthumb( classname : jqthumb, width : 100%, height : 300px, position : y: 50%, x: 50%, zoom : 1, method : auto, ); /script 在该函数中我们调用了jqthumb方法来定义一个宽度和轮播插件相同高度为300px的原图片的缩略图，该缩略图是由图片的中心开头生成的（留意其position属性的设置），这样即使图片的大小改变了，也可以显示图片的主要内容，而且图片比率可以保持不变。 以上就是全部内容，盼望能对大家有所关心 .