Css Image proportional scaling implementation program

The methods for FF, OPERA, SAFARI, IE7, and IE8 are as follows:

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

IE6 and earlier versions use the expression attributes supported by the browser:

 

The code is as follows:	Copy code
* Html img {/* for IE6 */ Width: expression (this. width> 100 & this. width> this. height? 100: auto ); Height: expression (this. height> 100? 100: auto ); }

 

In css, we need to wait for the proportional scaling image to be used for the css expression. scale: expression and this. offsetWidth> this. offsetHeight. See the example below.

The code is as follows:	Copy code
Img { Max-width: 600px; Max-height: 600px; Scale: expression (this. offsetWidth> this. offsetHeight )? (This. style. width = this. offsetWidth> = 600? "600px": "auto") :( this. style. height = this. offsetHeight> = 600? "600px": "auto ")); Display: inline! Important; } </Style>

In the above code, the width and height only provide a maximum value, which can be modified as needed. The third line is the scaling code, and the values inside should also be modified.

Although the above code is still completed by using JavaScript, it still feels good.

Note: for example, text cannot be selected, and the input box cannot be focused.

Therefore, change auto to true.