Code for adaptive webpage image width and height

I. Use CSS to adapt images
It is very easy to use CSS to implement image self-adaptation. It mainly relies on two parameters, max-width and max-height. These two parameters are well supported in FIREFOX and IE7, however, in IE6, the effect is very bad, especially for the display of multiple images. For the first time, it is very difficult to display images on webpages. Generally, some images are adaptive and some cannot be adaptive, multiple refreshes may display OK, which is annoying. Once multiple images are displayed, IE 6 becomes stuck to death (expression occupies resources on IE, I feel that the design is used to play well, FIREFOX's adaptive effect is still relatively good, and the speed is also very fast). Anyway, I have not found a better CSS method to make IE 6 perfectly support Image adaptation. The sample code is as follows:

The code is as follows:	Copy code
Img { Max-width: 128px; Max-height: 128px; Height: auto; Zoom: expression (function (e ){ If (e. width> e. height) {if (e. width> 128) {e. height = e. height * (128/e. width); e. width = 128 ;}} Else {if (e. height> 128) {e. width = e. width * (128/e. height); e. height = 128 ;}} E. style. zoom = '1';} (this )); Overflow: hidden; }

Pay special attention to the following two points in the above code format:
1. In the zoom attribute, the value of width and height cannot contain units (such as px); otherwise, the value is invalid;
2. if and else statements must be enclosed in braces, and single-statement commands cannot be used. (in many programming languages, single-statement commands do not require braces );
 

II. Image adaptation using Javascript
Javascript self-adaptation is relatively convenient. The only trouble is that you need to set the onload event processing resize () function in the image in the webpage. If it is better for dynamic webpages, it is dynamic, and it is OK to add the onload function in the program. However, it is a little troublesome to add the onload function in many articles unless you write a script at a time for batch processing, otherwise, it will be difficult to change or replace the image, for example, the display width of the image.

On the other hand, if the width value is written in Javascript, the versatility of the program will be reduced. The following example is not completely written. The tested effect is much happier than that of CSS, there are many similar examples on the Internet, either incomplete or there are still some problems in the middle. The example in this article should be better, I have tested the display effects of images of different sizes. Example:

The code is as follows:

Copy code

// Adjust the image width and height // Parameter description: // Obj is the image object. For the call method of this, see the following example. // MaxW and maxH indicate the maximum width and height respectively. Function resizeimg (obj, maxW, maxH) { Var imgW = obj. width; Var imgH = obj. height; If (imgW> maxW | imgH> maxH)          {        Var ratioA = imgW/maxW; Var ratioB = imgH/maxH; If (ratioA> ratioB)                   { ImgW = maxW; ImgH = maxW * (imgH/imgW );                   } Else                   { ImgH = maxH; ImgW = maxH * (imgW/imgH );                   }   Obj. width = imgW; Obj. height = imgH;          } }

Example

The code is as follows:	Copy code
:

When we set the width and height values, the general width must be limited, and the height often does not need to be limited, so we can set the height to a larger value, if the height is also limited, this is equivalent to creating an image box. The following program may be useful to you (ignore the following example without limiting the image height ).
When you specify an image BOX, it usually needs to be displayed in the center of the BOX container after the image is adaptive, that is, both horizontal and vertical must be centered. First, you must specify the width and height of the BOX container. Then you can use CSS to control the display effect, or use Javascript to control the display effect. Example:
Image box container:

The code is as follows:	Copy code
<Div id = "imgbox" style = "width: 800px; height: 800px; border: 1px solid # CCCCCC"> </Div>

The CSS display method is as follows:

The code is as follows:	Copy code
# Imgbox {text-align: center; vertical-align: middle ;} # Imgbox img {vertical-align: middle ;}

Or use Javascript to complete:
In the resizeimg () function above, you only need to add statements like this,

The code is as follows:	Copy code
Obj. style. margin-left = (800-imgW)/2; Obj. style. margin-top = (800-imgH)/2;