HTML Image Auto resize, HTML image size Adjusted Automatically

The customer once again sent a comment on the change, because images of different sizes will be stretched in length or width if they are not displayed proportionally.

In order to solve this problem, I found some materials on the Internet. My own idea is that there are two solutions:

1. Adjust the image size.

2. The other is to allow the browser to adjust the size automatically.

The first method is good, but for an image, you must save several versions/files of different sizes. however, additional programming and storage space are required. imageMagick is a good software that allows you to create copies of different sizes for the same image. however, I did not select.

The second scheme is relatively simple. The Max-width and max-height attributes are provided in the program. By specifying these two attributes, the image will automatically adjust the size as needed and ensure the length and width ratio. for example:> pass the test, it works in firefox2.0.0.3 and IE 7.0.5730.11. I don't know if IE6 works. I will test it tomorrow.

Of course, there are other methods, such as using JavaScript to control, I also wrote a method to test and pass, the only drawback is that the picture will first display in the browser according to the original size, then I quickly changed the display size because of JavaScript, and I don't feel very good. the following is the JavaScript code:

<Script language = "JavaScript">
Function resizeimage (_ image ){
VaR max_width = 300; // maximum allowed width
VaR max_height = 300; // maximum allowed height
VaR _ width = _ image. width; // Actual Image Width
VaR _ Height = _ image. height; // Actual Image Height
VaR width_ratio = _ width/max_width; // ratio of the maximum allowed width to the actual width of the image
VaR height_ratio = _ height/max_height; // ratio of the maximum allowed height to the actual Image Height
// Alert ("width ratio:" + width_ratio + ", height ratio:" + height_ratio );

If (width_ratio> = height_ratio ){
_ Image. width = max_width; // If the width ratio is large, the actual width is large. Therefore, the image width is limited and the height is automatically adjusted.
}
Else {
_ Image. Height = max_height; // vice versa. The height ratio is large and the Image Height is limited.
}
}
</SCRIPT>

Improved Version:

Function resizeimage (_ image, max_width, max_height ){
// Var max_width = 300;
// Var max_height = 300;
VaR _ width = _ image. width;
VaR _ Height = _ image. height;
VaR width_ratio = _ width/max_width;
VaR height_ratio = _ height/max_height;
// Alert ("width ratio:" + width_ratio + ", height ratio:" + height_ratio );

If (width_ratio >=height_ratio & _ image. width> max_width ){
_ Image. width = max_width;
}
Else if (height_ratio> width_ratio & _ image. Height> max_height ){
_ Image. Height = max_height;
}
}

========================================================== ========================================================

After testing, Max-height and max-width are invalid under IE6. Find the following online materials and use IE expression to solve the problem.
Http://www.svendtofte.com/code/max_width_in_ie/

The final solution is as follows. I set the maximum width/height of the image to PX.

. Imagestyle {...}{
Max-Height: 300px;
Max-width: 300px;
Width: expression (this. width> 300 & this. width> This. Height )? '300px ': This. Width + 'px ');
Height: expression (this. Height> 300 & this. Height> This. width )? '300px ': This. height + 'px ');
Border: 0px;
Vertical-align: middle;
}