imgCentering.js 圖片置中顯示

在設計網頁時，偶爾需要用到圖片的列表來顯示，但是網頁的大小往往都不能夠剛剛好適合你的需要，如果是新網站還比較好控制，那如果是既有的網站改版圖片的比例已經固定了，這個時候你就需要用到，imgCentering.js 讓網頁設的圖片列表可置中對齊又不會讓圖片變形，也不會對伺服器造成負擔，因為主要是使用到了用戶端來做運算。

使用方法：
第一步 先載入 imgCentering.js 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- imgcentering.js 的主程式碼 -->
<script src="js/imgcentering.js"></script>


第二步 設計圖片列表的 HTML 程式碼片段
也要用 CSS 設計方框的大小 本範例無寫入此一片段請自行設計
<a href="#" class="container">
   <img src="sample1.jpg" alt="" />
</a>
<a href="#" class="container">
   <img src="sample2.jpg" alt="" />
</a>
<a href="#" class="container">
   <img src="sample3.jpg" alt="" />
</a>
<a href="#" class="container">
   <img src="sample4.jpg" alt="" />
</a>
<a href="#" class="container">
   <img src="sample5.jpg" alt="" />
</a>
<a href="#" class="container">
   <img src="sample6.jpg" alt="" />
</a>

第三步 使用 JavaScript 讓 imgCentering.js 初始化
$( function() {
   $(".container img").imgCentering();
});

附上 imgCentering.js 可修改參數表

參數	屬性	預設	說明
forceWidth	布林	false	是否符合容器的寬度設置
forceHeight	布林	false	是否符合容器的高度設置
forceSmart	布林	false	是否自動偵測縮放置最符合容器大小
bgColor	字串	'inherit'	空的位置背景顏色

作者網站：http://www.inwebson.com/jquery/
檔案大小：430 KB
檔案下載：http://www.inwebson.com/demo/download/imgcentering.zip
檔案備份：下載