這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案，使用jqthumb.js，感興趣的小伙伴們可以參考一下

在頂求網(wǎng)的首頁(yè)中我使用了BootStrap的輪播（carousel）插件來(lái)展示文章中的圖片。我在程序中自動(dòng)抓取文章的第一張圖片作為該輪播控件中要顯示的圖片，由于文章的圖片大小不一，而輪播插件的大小基本是固定的，所以展示的時(shí)候圖片出現(xiàn)了變形。在網(wǎng)上找了很多中方式也沒(méi)有解決(過(guò)程曲折，不再贅述)，直到找到了這款Jquery的縮放插件——jqthumb.js.下面來(lái)看看如何使用它以及如何利用它來(lái)控制輪播控件中圖片的大小，而且能夠做到不變形，可以顯示圖片的主要部分（類(lèi)似于微信朋友圈的圖片混排效果——不知道大家有沒(méi)有注意，在微信朋友圈中無(wú)論你發(fā)的圖片的比率是什么，總能夠被完美的排列，而不會(huì)發(fā)生變形）。首先我們看看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="包含圖片一文章路徑">

     <img src="圖片一路徑" alt="圖片一" onload="DrawImage(this)"/></a>

     <div class="carousel-caption">

        <h4 class="alpha">

          <a style="color:white;" href="包含圖片一文章路徑">圖片一標(biāo)題</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="包含圖片二文章路徑">圖片二標(biāo)題</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="包含圖片三文章路徑">圖片三標(biāo)題</a>

        </h4>

       </div>

   </div>

 </div>

由上述代碼可以看到，每個(gè)圖片（img）在加載（onload）的時(shí)候都調(diào)用了一個(gè)函數(shù)DrawImage,在這個(gè)函數(shù)中我們就可以調(diào)用jqthumb.js的方法來(lái)控制圖片的大小了，注意該函數(shù)一定要加在上述HTML代碼前，否則第一次加載的時(shí)候控制圖片大小會(huì)失?。ㄒ?yàn)轫?yè)面加載時(shí)序的原因），函數(shù)代碼如下： 

<!--導(dǎo)入插件-->

<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>

在該函數(shù)中我們調(diào)用了jqthumb方法來(lái)定義一個(gè)寬度和輪播插件相同高度為300px的原圖片的縮略圖，該縮略圖是由圖片的中心開(kāi)始生成的（注意其position屬性的設(shè)置），這樣即使圖片的大小變化了，也可以顯示圖片的主要內(nèi)容，而且圖片比率可以保持不變。 

以上就是所有內(nèi)容，希望能對(duì)大家有所幫助