Méthode d'implémentation du contrôle de la taille d'affichage des images JS [fonction de réduction d'image proportionnelle]

本文实例讲述了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;
}//
) Ratio = hRatio;1if (maxHeight==0){
}
) Ratio = wRatio;1}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 />
Affichage en fonction de l'image 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.Largeur250 Compression, sans限制 hauteur Compression proportionnelle<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.Hauteur250 Compression, sans限制 largeur Compression proportionnelle<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.Hauteur250 Largeur250 Compression proportionnelle<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 />
4La compression de hauteur et de largeur n'est pas proportionnelle (400 X 512)), à ce moment-là, la hauteur reste inchangée et est automatiquement compressée en fonction du rapport de hauteur.<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 />
5La compression de hauteur et de largeur n'est pas proportionnelle (300 X 600), à ce moment-là, la largeur reste inchangée et est automatiquement compressée en fonction du rapport de largeur.<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 />
6Si la hauteur et la largeur d'origine de l'image sont inférieures à la hauteur et à la largeur maximales de compression, l'image ne sera pas agrandie pour l'affichage (affichage en fonction de l'image originale)<br />
image originale444 x 207,compressé en 500 x 600,conservera l'affichage original<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'image de rendu suivante montre :

Pour ceux qui sont intéressés par plus de contenu sur JavaScript, vous pouvez consulter les sujets spéciaux de ce site : "Tutoriel complet des techniques d'opération d'image JavaScript", "Résumé des techniques et astuces de transition JavaScript", "Résumé des techniques et astuces de dessin graphique JavaScript", "Résumé des techniques et astuces de recherche d'algorithmes JavaScript", "Résumé des techniques et astuces de débogage des erreurs JavaScript", "Résumé des techniques et astuces des structures de données et algorithmes JavaScript", "Résumé des techniques et astuces des algorithmes de parcours JavaScript" et "Résumé des techniques et astuces des opérations mathématiques JavaScript"

J'espère que cette explication aidera à améliorer la conception de programme JavaScript de tous.

Déclaration : le contenu de cet article est extrait du réseau, la propriété intellectuelle appartient aux auteurs respectifs, le contenu est contribué et téléversé par les utilisateurs d'Internet, ce site n'appartient pas à la propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler des infractions, et fournir des preuves pertinentes. Une fois vérifié, le site supprimera immédiatement le contenu suspect d'infraction.)

Tutoriel de base