在頂求網的首頁中我使用了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屬性的設定），這樣即使圖片的大小變化了，也可以顯示圖片的主要內容，而且圖片比率可以保持不變。

以上就是所有內容，希望能對大家有所幫助，轉載請註明來源為頂求網

以上是從網路收集的資料，用過後確實解決了圖片再不同解析度裝置下的縮放問題，但是如果載入的圖片超出了輪播位的高度，圖片將有一瞬間的溢位問題。

故在輪播位的DIV 加入<style="overflow: hidden;">.

注： overflow: hidden
overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪，並且剪掉的內容是不可見的。