Bootstrap輪播（carousel）插件中圖片變形的終極解決方案——使用jqthumb.js

在頂求網的首頁中我使用了BootStrap的輪播（carousel）插件來展現文章中的圖片。我在程序中自動抓取文章的第一張圖片做爲該輪播控件中要顯示的圖片，因爲文章的圖片大小不一，而輪播插件的大小基本是固定的，因此展現的時候圖片出現了變形。在網上找了不少中方式也沒有解決(過程曲折，再也不贅述)，直到找到了這款Jquery的縮放插件——jqthumb.js.下面來看看如何使用它以及如何利用它來控制輪播控件中圖片的大小，並且可以作到不變形，能夠顯示圖片的主要部分（相似於微信朋友圈的圖片混排效果——不知道你們有沒有注意，在微信朋友圈中不管你發的圖片的比率是什麼，總可以被完美的排列，而不會發生變形）。首先咱們看看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="包含圖片一文章路徑">圖片一標題</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>

由上述代碼能夠看到，每一個圖片（img）在加載（onload）的時候都調用了一個函數DrawImage,在這個函數中咱們就能夠調用jqthumb.js的方法來控制圖片的大小了，注意該函數必定要加在上述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屬性的設置），這樣即便圖片的大小變化了，也能夠顯示圖片的主要內容，並且圖片比率能夠保持不變。

以上就是全部內容，但願能對你們有所幫助，轉載請註明來源爲頂求網