Four css Image proportional scaling instances (compatible with ie6, 7, and firefox)

Use the css attributes of max-width, max-height; or min-width and min-height. For example:

The code is as follows:	Copy code
Img {max-width: 100px; max-height: 100px ;} Img {min-width: 100px; min-height: 100px ;}

For browsers of ie6 and earlier versions, you can use the expression attribute supported by ie6 to embed the webpage special effect code in css code.
To scale the image.

. Thumbimage {max-width: 100px; max-height: 100px;}/* for firefox & ie7 */
* Html. thumbimage {/* for ie6 */
Width: expression (this. width> 100 & this. width> this. height? 100: auto );
Height: expression (this. height> 100? 100: auto );
}

Method 2

Proportional scaling of css images
Css Image proportional scaling.

The code is as follows:	Copy code
Thumbimaged {max-width: Pixel px; max-height: Pixel px;}/* for firefox & ie7 */* html. thumbimaged {/* for ie6 */width: expression (this. width & gt; 650 & this. width> this. height

Method 3

<Style type = "text/css">

The code is as follows:	Copy code
. Thumbimage { Max-width: 300px; Max-height: 200px; } * Html. thumbimage { Width: expression_r (this. width> 300 & this. width> this. height? 300: auto ); Height: expresion (this. height> 200? 200: auto ); }

</Style>

Call this css style in image call
------------------------------------------

Method Example 4

The code is as follows:	Copy code
# Image1 { Width: expression (this. width> 980 & this. width> this. height? 730: true ); Height: expresion (this. height> 980? 730: true ); }

If the image width exceeds 980, go to 980, less than 980, and take the original width