JS實現等比例縮放圖片

　　有時候咱們前端頁面只有500×500像素的寬和高的佈局，可是後臺返回的數據圖片是1000×1000，那麼這種狀況下 若是我直接返回的話 那麼圖片確定有一部分沒有顯示出來，在這種狀況下我是想能不能在咱們前端開發實現圖片等比例縮放。好比以下HTML代碼：

<div id="demo1"> 
    <img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""> 
</div> 

CSS代碼以下：

#demo1{width:800px;height:300px;overflow:hidden;}

外層div的css樣式定了寬度是800像素 高度是300像素，可是這張圖片的寬度和高度分別是1060像素和300像素，若是咱們不作任何處理的話，那麼圖片確定會有260像素被隱藏掉了，而咱們如今想要圖片被渲染出來後 根據外層容器800像素×300像素的寬度和高度分別等比例縮放，這樣的話 無論圖片的寬度和高度是多少，均可以自適應！

已知圖片的寬度和高度的等比例縮放的原理是：

 

HTML代碼以下：

<img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" width="1060" height="300" alt=""> 
<div id="demo1"> 
    <img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""> 
</div>

CSS代碼以下：

#demo1{width:800px;height:300px;overflow:hidden;}

JS代碼以下：

/**
 * 已知圖片的寬度和高度的等比例縮放
 */

 function knowImgSize(id) {
    var idWidth = $(id).width(),  // 容器的寬度和高度
        idHeight = $(id).height();

    $(id + ' img').each(function(index,img){
        var img_w = $(this).width(),
            img_h = $(this).height();

        // 若是圖片自身寬度大於容器的寬度的話 那麼高度等比例縮放
        if(img_w > idWidth) {
            
            var height = img_h * idWidth / img_w;
            $(this).css({"width":idWidth, "height":height});
        }
    });

 }

 // 初始化
 $(function(){
    knowImgSize("#demo1");
 });