javascript <!--
本樣本示範圖片載入時自動顯示等比例縮圖,在做web程式的時候往往會遇到客戶上傳很大的圖片,但是顯示的時候如果把所略圖的高寬比手工設定好,由於圖片的形狀不同會造成顯示變形,這裡用一段小指令碼程式來解決這個問題,你可以把它修改一下做的更通用一些,比如說把Wa_SetImgAutoSize()函數加個img參數,然後在圖片的onload=事件裡傳送自己去調用函數.
-->
<HTML>
<HEAD>
<TITLE>示範圖片等比例縮小</TITLE>
<script>
function Wa_SetImgAutoSize()
{
var img=document.all.img1;//擷取圖片
var MaxWidth=200;//設定圖片寬度界限
var MaxHeight=100;//設定圖片高度界限
var HeightWidth=img.offsetHeight/img.offsetWidth;//設定高寬比
var WidthHeight=img.offsetWidth/img.offsetHeight;//設定寬高比
if(img.readyState!="complete")return false;//確保圖片完全載入
if(img.offsetWidth>MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight>MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
</script>
</HEAD>
<BODY>
<img src="" border=0 id="img1" >
<br>
<input id=inp type="file" onpropertychange="img1.src=this.value;">
</BODY>
</HTML>
