Adjust the image size with CSS

Generally, you can set a CSS attribute for the image to define its height and width. But sometimes, we only want to control the maximum visible size of the image. There are two methods for this operation: 1. directly use the CSS property value; 2. dynamically set the CSS value using JavaScript.

I. fixed size
Generally, the following HTML or CSS attribute values are used to limit the image size:

IMG {
Width: 600px;
Height: 500px;
}

However, this setting is too rigid and inflexible.

Ii. Use CSS attribute values

IMG. qtipimg {
Max-width: 500px;
Width: 500px;
Width: expression (this. Width & gt; 500? "500px": This. width );
Overflow: hidden;
}

Here, an IMG label under the qtipimg class is defined using CSS rules. the max-width attribute is used to control the image within the width range of 500px and the image is adaptive proportional.
However, browsers do not support this attribute. For example, IE6 does not support this attribute.
Therefore, an expression action is added later. The statement in parentheses of this operator is a Javascript script used to dynamically adjust the image size.
In the end, overflow: hidden hides the part that exceeds the configured size to avoid display exceptions.
This setting has been tested and works properly in IE7, IE8, and Firefox 3.5.

Iii. use JavaScript scripts
Each browser (including different versions) has different support for CSS. For example, in IE 8, the support for expression operations is canceled. At this time, using JavaScript to adjust the image size is also a good method. However, the defect is that, when a pure Javascript script is used, the size of the image will overflow during download, and JavaScript will adjust the size to a proper value until the download is complete.
1. Use a transit image object
Two JavaScript Functions:

Function getimagesize (filepath ){
VaR imgsize = {width: 0, height: 0 };
Image = new image ();
Image. src = filepath;
Imgsize. width = image. width;
Imgsize. Height = image. height;
Return imgsize;
}
Function fiximagesize (originalimage ){
Fixsize = 500;
If (originalimage. width> fixsize ){
Originalimage. Height = math. Round (originalimage. Height * fixsize/originalimage. width );
Originalimage. width = fixsize;
}
Return originalimage;
}

When used, the image address is passed to the two functions. The returned value is the adjusted image:

IMG = getimagesize ("http://www.linuxfly.org/logo.gif ");
IMG = fiximagesize (IMG );
Finalresult = ' ';

2. Adjust the DOM size after loading.
Although the expression method of CSS will be canceled, it is a good method to calculate the appropriate CSS value directly using JavaScript. For example, the $ (document). Ready () method of jquery can avoid overflow during image loading.
The following script is from:

$ (Document). Ready (function (){
$ ('. Post IMG'). Each (function (){
VaR maxwidth = 100; // maximum Image Width
VaR maxheight = 100; // maximum Image Height
VaR ratio = 0; // scaling ratio
VaR width = $ (this). Width (); // Actual Image Width
VaR Height = $ (this). Height (); // Actual Image Height

// Check whether the image is too wide
If (width> maxwidth ){
Ratio = maxwidth/width; // calculate the scaling ratio.
((This).css ("width", maxwidth); // you can specify the actual display width.
Height = height * ratio; // calculate the scaled height.
((This).css ("height", height * ratio); // sets the height after proportional scaling.
}

// Check whether the image is ultra high
If (height> maxheight ){
Ratio = maxheight/height; // calculate the scaling ratio.
((This).css ("height", maxheight); // you can specify the actual display height.
Width = width * ratio; // calculate the scaled height.
((This).css ("width", width * ratio); // set the height after proportional Scaling
}
});
});