Implementation method for controlling the display size of images in JavaScript [Image proportional scaling function]

This example explains how to control the image display size with JavaScript. Shared for everyone's reference, as follows:

<!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>Latest JavaScript automatic proportional image display, proportional image compression display</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1if (hRatio<
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
} 1if (hRatio<
) Ratio = hRatio;//
else if (maxHeight==0){1}
if (wRatio<
) Ratio = wRatio;1else 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 />
Display original image (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=""/></a><br/><br />
1.Compress by width250 Compress without height limit, compress proportionally<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.Compress by height250 Compress without width limit, compress proportionally<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.Compress by height250Width250 Compress proportionally<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.High and width are not compressed in proportion (400 X 512) />
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.High and width are not compressed in proportion (300 X 600), at this time, the width remains unchanged, and it will automatically compress according to the width ratio.<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 />
6If the original height and width of the image are less than the maximum compression height and width, the image will not be stretched to display (displayed as the original image)<br />
original image444 x 207,compressed to 500 x 600,will maintain the original image display<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>

The running effect diagram is as follows:

Readers who are interested in more about JavaScript-related content can check the special topics on this site: 'Comprehensive Skills of JavaScript Image Operations', 'Summary of JavaScript Switching Effects and Techniques', 'Summary of JavaScript Graphics Drawing Techniques', 'Summary of JavaScript Search Algorithm Techniques', 'Summary of JavaScript Error and Debugging Techniques', 'Summary of JavaScript Data Structures and Algorithm Techniques', 'Summary of JavaScript Traversal Algorithm and Techniques', and 'Summary of JavaScript Mathematical Operation Usage'.

I hope the content of this article will be helpful to everyone in designing JavaScript programs.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not bear relevant legal responsibilities. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please report via email to codebox.com (replace # with @) when reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial