用JS自動產生等比例所略圖

來源:互聯網
上載者:User
js <!--
本樣本示範圖片載入時自動顯示等比例縮圖,在做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>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。