Bootstrap轮播插件中图片变形的终极解决方案使用jqthumbjs.doc

Bootstrap轮播插件中图片变形的终极解决方案使用jqthumbjs.doc:..,,感兴趣的小伙伴们可以参考一下在顶求网的首页中我使用了Bootstrap的轮播(carousel)插件来展示文章中的图片。我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形。在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件 jqthumb,,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果不知道大家有没有注意,在微信朋友圈中无论你发的图片的比率是什么,总能够被完美的排列,而不会发生变形)。首先我们看看Bootstrap的Carousel的html代码:nbsp;//It;divid=carousel一example-lasscarouselslide"data-ride=/zcarousel"gt;It;!-一Wrapperforslides--gt;nbsp;It:divclass=〃carousel-inner〃role=〃listboxz/gt:nbsp;nbsp;It:divclass=〃itemactive〃gt;nbsp:nbsp;It;ahref=〃包含图片一文章路径〃gt;nbsp;nbsp;nbsp;It;imgsrc=〃图片一'路径〃alt=〃图片一’’onload=//DrawImage(this)Vgt;It;/agt;nbsp;nbsp;nbsp:It:divelass=〃carousel-captiongt;nbsp;nbsp;nbsp;nbsp;It;h4class=〃alpha/zgt;nbsp;nbsp;nbsp;nbsp;nbsp;It:astyle=〃color:white;〃href="包含图片一文章路径"gt;图片一标题It;/agt;nbsp;nbsp;nbsp;nbsp;It;/h4gt;nbsp;nbsp;nbsp;nbsp;It;/divgt;nbsp;nbsp;It;/divgt;nbsp;nbsp;It;divclass=〃item〃gt;nbsp;nbsp;It;ahref=〃包含图片二文章路径〃gt;nbsp;nbsp;nbsp;It;imgsrc=〃图片二路径〃alt=〃图片二"onload=〃DrawImage(this)〃/gt;nbsp;nbsp;1t;/agt;nbsp;nbsp;It;divclass=〃carouse卜caption〃gt;nbsp;nbsp;nbsp;nbsp;It;h4class=〃alpha〃gt;nbsp;nbsp;nbsp;nbsp;nbsp;It;astyle="color:white;〃href=〃包含图片二文章路径〃gt;图片二标题lt;/agt;nbsp:nbsp;nbsp;nbsp;It;/h4gt;nbsp;nbsp;nbsp;nbsp;It;/divg