前幾天群里碰到好幾個(gè)在調(diào)整內(nèi)容頁(yè)圖片尺寸太大時(shí)自動(dòng)縮小的問(wèn)題，今天我在做一個(gè)別墅設(shè)計(jì)相關(guān)網(wǎng)站時(shí)，也碰到了這個(gè)問(wèn)題，所以考慮了個(gè)通用的解決方案。
所謂通用，即：
1、任何CMS均可使用；
2、只需要把這個(gè)代碼添加到內(nèi)容頁(yè)模板的最下方，或者直接添加到footer.htm等公共頁(yè)腳模板中；
3、不需要任何編程基礎(chǔ)就能使用。
好，費(fèi)話(huà)這么多，只有一點(diǎn)，高手請(qǐng)略過(guò)，下面方法和代碼僅供懶得看編程、懶得改程序的懶人參考。
一般圖片尺寸超過(guò)文章內(nèi)容頁(yè)文章內(nèi)容顯示區(qū)域?qū)挾葧r(shí)雖然可以通過(guò)CSS來(lái)實(shí)現(xiàn)，如可以設(shè)置max-width:600px等屬性，但是瀏覽器兼容性有問(wèn)題，又如直接用CSS中表達(dá)式expression中通過(guò)判斷圖片寬高來(lái)設(shè)置CSS的，但因?yàn)樯婕鞍踩詥?wèn)題，可能很多瀏覽器都顯示不出效果。那最好的解決辦法，莫過(guò)JS了，網(wǎng)上有一部流傳的JS包括落葉博客里的這篇文章中的解決方法 ，都需要在圖片中加onload屬性來(lái)調(diào)用函數(shù)實(shí)現(xiàn)，但是這樣的麻煩之處是要么需要改CMS的代碼，要么需要在添加文章時(shí)手動(dòng)添加，比較麻煩。
下面就是利用jquery簡(jiǎn)單實(shí)現(xiàn)自動(dòng)識(shí)別且自動(dòng)縮小圖片的通用解決方案：
<script language="JavaScript" src="http://www.zzsky.cn/effect/images/jquery-1.4.2.min.js"></script>
<script language="javascript">
$.each($("#content img"),function(){//把“content”修改為內(nèi)容頁(yè)顯示內(nèi)容的DIV的ID屬性值
var image=new Image();
image.src=$(this).attr('src');
if(image.width>0 && image.height>0){
if(image.width>=600){//三處“600”修改為需要等比例縮小的最大圖片寬度
$(this).attr('width',600);
$(this).attr('height',(image.height*600)/image.width);
}
}
});
</script>
上面代碼需要修改的地方就是上面注釋的兩處。代碼的意思是：查找文章內(nèi)容頁(yè)中id=content的DIV區(qū)域中的圖片，并判斷寬度，如果寬度大于指定寬度（如600）則等比例縮小。代碼只需要添加到模板的最下方即可。調(diào)用的js可以自己保存，當(dāng)然很多CMS如PHPCMS、DEDECMS都已經(jīng)加截了jquery.min.js，上面第一行可以不要。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
