1. 程式人生 > >用javascript實現圖片等比例縮放

用javascript實現圖片等比例縮放

js部分:

<script type="text/javascript">

$(window).load(function() {

  ImageAutoResize('div[id=demotu]');

  function ImageAutoResize(findstr)

  {

   var maxWidth = $(findstr).css("width").replace('px','');

   var maxHeight = $(findstr).css("height").replace('px','');

   $(findstr + ' img').each(function() {

   var ratio = 0;  // 縮放比例

   var width = $(this).width();    // 圖片實際寬度

   var height = $(this).height();  // 圖片實際高度

   // 檢查圖片是否超寬

   if(width > maxWidth){

    ratio = maxWidth / width;   // 計算縮放比例

    $(this).css("width", maxWidth + 'px'); // 設定實際顯示寬度

    $(this).css("height", (height * ratio) + 'px');  // 設定等比例縮放後的高

   }

   var width = $(this).width();    // 圖片實際寬度

   var height = $(this).height();  // 圖片實際高度

   // 檢查圖片是否超高

   if(height > maxHeight){

    ratio = maxHeight / height; // 計算縮放比例

    $(this).css("height", maxHeight + 'px');   // 設定實際顯示高度

    $(this).css("width", (width * ratio) + 'px');    // 設定等比例縮放後的高度

   }

   //調整位置

   var width = $(this).width();    // 圖片實際寬度

   var height = $(this).height();  // 圖片實際高度

   $(this).css("margin-left",(maxWidth - width) / 2 + 'px');

   $(this).css("margin-top",(maxHeight - height) / 2 + 'px');

   });

  }

 });

</script>