圖片自動縮小的js代碼,用以防止圖片撐破頁面
更新時間：2007年03月12日 00:00:00 作者：
JS代碼(隨便放哪里):
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=http://www.dhdzp.com/htmldata/2006-01-08/ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 180/110){
if(image.width>180){
ImgD.width=180;
ImgD.height=(image.height*110)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
else{
if(image.height>110){
ImgD.height=110;
ImgD.width=(image.width*110)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
}
}
//-->
</script>
圖片使用的地方:
<img src="http://www.dhdzp.com/htmldata/2006-01-08/圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意這里最好限定,如果不限定加載圖時會成原大,然后再縮小,這個過程如果圖大了很難看的.這里是寬度和高度,在前面的JS里改,這里也作相應的改.
圖不會變形,只會按比列縮,放心
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=http://www.dhdzp.com/htmldata/2006-01-08/ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 180/110){
if(image.width>180){
ImgD.width=180;
ImgD.height=(image.height*110)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
else{
if(image.height>110){
ImgD.height=110;
ImgD.width=(image.width*110)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
}
}
//-->
</script>
圖片使用的地方:
<img src="http://www.dhdzp.com/htmldata/2006-01-08/圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意這里最好限定,如果不限定加載圖時會成原大,然后再縮小,這個過程如果圖大了很難看的.這里是寬度和高度,在前面的JS里改,這里也作相應的改.
圖不會變形,只會按比列縮,放心
相關(guān)文章
javascript設(shè)計模式 – 策略模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 策略模式,結(jié)合實例形式分析了javascript策略模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript使用箭頭函數(shù)實現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時常被普通函數(shù)的冗長寫法所困擾,每次都需要寫function關(guān)鍵字,有時候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11
這篇文章主要給大家介紹了關(guān)于前端大文件分片MinIO上傳的詳細代碼,Minio支持分片上傳大文件,這個功能可以讓用戶將大文件劃分成小塊,然后在多個并行的HTTP請求中上傳這些小塊,從而提高上傳速度和穩(wěn)定性,需要的朋友可以參考下2024-09-09
本章節(jié)討論使用ES6編碼風格到代碼中需要注意的點。通過記住這些關(guān)鍵點，可以讓我們寫出更優(yōu)美的、可讀性更強的JavaScript ES6風格的代碼。2021-05-05
今天小編就為大家分享一篇layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了微信小程序自定義計時器功能，設(shè)置一個時間，可以開始倒計時、暫停，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了javascript實現(xiàn)淘寶幻燈片廣告展示效果的方法,以實例形式完整講述了javascript實現(xiàn)幻燈效果的javascript、css及html實現(xiàn)技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS通用方法觸發(fā)點擊事件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Active控件問題小結(jié)(附解決辦法)的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
如今ES6已經(jīng)發(fā)布了有一段時間了，很多人學了ES6但是卻沒運行環(huán)境，下面這篇文章主要給大家介紹了關(guān)于搭建ES6運行環(huán)境的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07