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

<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="包含图片一文章路径">
   <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="包含图片二文章路径">图片二标题</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>

<!--导入插件-->
<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>