開發遇到的問題
我們平時開發，后台通過在線編輯器，編輯帖子，上傳圖片，比如ckeditor配置上傳圖片，是可以設置圖片大小的；
這種設置對pc端的話 也許你設置個 800,600，還是可以的。
但是有沒有考慮過移動端呢？
我們發現移動端的圖片有一部分看不到的。
解決方案概述
對於圖片的縮放，有兩種解決方案；
一，設置img DOM的max-width為100%；
二，通過Js計算，來動態設置圖片的寬度和高度；
這要分兩種情況，來具體采用哪種方案；
情況一：圖片寬度占據整個網頁寬度解決方案
對於情況一，比如移動端，圖片是占據整個網頁寬度的，這種比較好解決；
我們加img css樣式即可；
img{width:100%; max-width:100%;}
注意點：
使用這種方式，編輯器添加的圖片不能設置height,否則高度不能等比例的縮小，圖片會變形；
如下圖：
上面沒有設置 高度，下面的設置了高度；
用了max-width，雖然寬度都正常縮放了，但是高度的話，下面那個設置了height屬性的，就變成了，沒有和寬度一起等比例縮放；
情況二：圖片寬度未占據整個網頁寬度解決方案
對於大多數pc端，我們一般都是左右兩塊或者三塊，所有圖片的話，一般是不占據整個網頁寬度的；如下圖：
這里我們分成左右兩塊，我們如果上傳了一個大圖，不做等比例縮小處理的話，就會超過我們設置的左邊區域的寬度，這樣用戶體驗比較差；
這種情況我們不能用max-width，只能用js進行計算，動態修改img的寬度和高度；
如何來進行計算呢？
我們這里考慮兩種情況，如下圖：
一種是 沒設置寬度高度，就純img，還有一個是設置了寬度高度，有一個 style內聯樣式；
所以我們設計通用js方法的時候，需要傳入三個參數，maxwidth，maxheight，還有一個是某個DOM里面的img；
我們規定好最大的寬度，最大的高度，和指定范圍內的圖片；
接下下方法具體實現，我們通過 getElementsByTagName('img') 可以指定DOM里的所有圖片，然后遍歷所有圖片，
對每個圖片的高度和寬度進行判斷，是否超過設置的最高高度和寬度，假如超過了，我們就要通過等比例計算，把縮小后的寬度對應的高度進行計算，以及對縮小后的高度對應的寬度進行計算；
當然最終設置圖片的height和widht的時候，我們記得也要重新設置下style內聯樣式；
完整實現代碼：
function ResizeImages(maxwidth,maxheight,targetDom) { var myimg,oldwidth,oldheight; var imgs = document.getElementById(targetDom).getElementsByTagName('img'); //如果你定義的id不是article，請修改此處 for(i=0;i<imgs.length;i++){ myimg = imgs[i]; if(myimg.width > myimg.height) { if(myimg.width > maxwidth) { oldwidth = myimg.width; myimg.height = myimg.height * (maxwidth/oldwidth); myimg.width = maxwidth; myimg.style.cssText="height:"+myimg.height * (maxwidth/oldwidth)+"px;width:"+maxwidth+"px"; } }else{ if(myimg.height > maxheight) { oldheight = myimg.height; myimg.width = myimg.width * (maxheight/oldheight); myimg.height = maxheight; myimg.style.cssText="height:"+maxheight+"px;width:"+myimg.width * (maxheight/oldheight)+"px"; } } } }
調用的話 body onload里即可；
<body onload="ResizeImages(800,1000,'content')">
這樣就頁面顯示圖片就協調多了；
最佳實踐
在線編輯器，不設置widht和height；
pc端通過js計算，動態設置；
wap端設置max-width即可；
最佳實踐，完美解決；
------------------------------------------------------------------------------------------------------------------------------
作者： java1234_小鋒
出處：https://www.cnblogs.com/java688/p/13200262.html
版權：本站使用「CC BY 4.0」創作共享協議，轉載請在文章明顯位置注明作者及出處。
------------------------------------------------------------------------------------------------------------------------------