圖片等比例縮放程式碼

實現圖片等比例縮放這一點很重要，否則就有可能導致圖片變形，這美觀度和真實性就無法得到保障，下面就是一段利用jQuery實現的能夠實現圖片等比例縮放的程式碼，如下:

一.要操作圖片:

[HTML] 純文字檢視 複製程式碼
<a href=""><img src="images/tmp.jpg" width="300" height="300"/></a>

二.相關CSS程式碼:

[CSS] 純文字檢視 複製程式碼
a{
  width:300px;
  height:300px;
  background:#fff;
  border:1px solid #666;
  display:inline-block
}

三.jQuery相關程式碼:

[JavaScript] 純文字檢視 複製程式碼
$(function () {
  var imgs = $('a>img');
  imgs.each(function () {
    var img = $(this);
    var width = img.attr('width');//區域寬度
    var height = img.attr('height');//區域高度
    var showWidth = width;//最終顯示寬度
    var showHeight = height;//最終顯示高度
    var ratio = width / height;//寬高比
    img.load(function () {
      var imgWidth, imgHeight, imgratio;
      $('<img />').attr('src', img.attr('src')).load(function () {
        imgWidth = this.width;//圖片實際寬度
        imgHeight = this.height;//圖片實際高度
        imgRatio = imgWidth / imgHeight;//實際寬高比
        if (ratio > imgRatio) {
          showWidth = height * imgRatio;//調整寬度太小
          img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);
        } 
        else {
          showHeight = width / imgRatio;//調高度太小
          img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
        }
      });
    });
  });
});