English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本文实例讲述了JS实现控制图片显示大小的方法。分享给大家供大家参考，具体如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
Mostra immagine originale (534 x 800)<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="[#0#]"/></a><br/><br />
1. Comprimi per larghezza 250, senza limitare l'altezza, compressione proporzionale<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="[#1#]"/></a><br /><br />
2. Comprimi per altezza 250, senza limitare la larghezza, compressione proporzionale<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="[#2#]"/></a><br /><br />
3. Compressione per altezza 250 e larghezza 250 in proporzione<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="[#3#]"/></a><br /><br />
4. Compressione non proporzionale altezza/larghezza (400 X 512), in questo caso l'altezza rimane invariata, verrà automaticamente compressa in proporzione all'altezza.<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="[#4#]"/></a><br /><br />
5. Compressione non proporzionale altezza/larghezza (300 X 600), in questo caso la larghezza rimane invariata, verrà automaticamente compressa in proporzione alla larghezza.<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="[#5#]"/></a><br /><br />
6. Se l'altezza e la larghezza dell'immagine originale sono inferiori all'altezza e alla larghezza massime di compressione, l'immagine non verrà ingrandita (visualizzata come l'originale)<br />
Immagine originale 444 x 207, compressa a 500 x 600, mantenendo la visualizzazione originale<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218122006996.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="[#6#]"/></a><br /><br />
</body>
</html>
L'effetto di esecuzione è come segue:
Leggi di più sui contenuti relativi a JavaScript che ti interessano, puoi consultare le sezioni speciali del nostro sito: 'Manuale completo delle tecniche di manipolazione delle immagini JavaScript', 'Riassunto delle tecniche e delle tecniche di transizione JavaScript', 'Riassunto delle tecniche di disegno delle immagini JavaScript', 'Riassunto delle tecniche di ricerca degli algoritmi JavaScript', 'Riassunto delle tecniche di debug degli errori JavaScript', 'Riassunto delle tecniche di strutture dati e algoritmi JavaScript', 'Riassunto delle tecniche di esplorazione degli algoritmi JavaScript' e 'Riassunto delle tecniche di calcolo matematico JavaScript'.
Spero che il contenuto di questo articolo possa essere utile per la progettazione di programmi JavaScript di tutti.
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente i contenuti sospetti di violazione del copyright.