有時候我們前端頁面只有500×500像素的寬和高的布局，但是後台返回的數據圖片是1000×1000，那麼這種情況下 如果我直接返回的話 那麼圖片肯定有一部分沒有顯示出來，在這種情況下我是想能不能在我們前端開發實現圖片等比例縮放。比如如下HTML代碼：
<div id="demo1"> <img src=http://www.2cto.com/uploadfile/2014/0120/20140120084827179.jpg" alt=""> </div> CSS代碼如下： #demo1{width:800px;height:300px;overflow:hidden;} 外層div的css樣式定了寬度是800像素 高度是300像素，但是這張圖片的寬度和高度分別是1060像素和300像素，如果我們不做任何處理的話，那麼圖片肯定會有260像素被隱藏掉了，而我們現在想要圖片被渲染出來後 根據外層容器800像素×300像素的寬度和高度分別等比例縮放，這樣的話 不管圖片的寬度和高度是多少，都可以自適應！ 下面我們可以先看看JSFIddle效果是什麼樣的！第一張圖片是沒有任何處理的，第2張小的是根據寬度800像素進行等比例縮放後的。 想要看效果，請輕輕點擊我！ 已知圖片的寬度和高度的等比例縮放的原理是： HTML代碼如下： <img src=http://www.2cto.com/uploadfile/2014/0120/20140120084827179.jpg" width="1060" height="300" alt=""> <div id="demo1"> <img src=http://www.2cto.com/uploadfile/2014/0120/20140120084827179.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"); });