CSS makes image proportional scaling compatible with IE6, IE7, and FF

Because you wantHuang Qi life Information NetworkThe Forum adds the image upload function, but does not want to use components to control the size of the uploaded images. Therefore, CSS is used to control the image size. After searching for half a day, the first thing I found was:

CSS controls image scaling 1
< Style Type = "Text/CSS" >
. Thumbimage {  
Max-Width : 300px ;  
Max-height : 200px ;  
}  
* Html. thumbimage {  
Width : Expression (this. width> 300 & this. width> This. Height? 300: auto) ;  
Height : Expresion (this. Height> 200? 200: auto) ;  
}
</ Style >

Call this CSS style in image call
------------------------------------------
<IMGSRC= "Image file address"Class= "Thumbimage" />

 

The result does not work, so I can find another one:

CSS controls image scaling 2
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
< Title > Untitled document </ Title >
< Script Type = "Text/JavaScript" >
Function Resumeerror (){ Return   True ;}
Window. onerror = Resumeerror; // Shield JS errors so that the status bar does not display "errors on the website"
</ Script >

< Style Type = "Text/CSS"   >
. Album-pic-list img {  
Vertical-align : Middle ;  
Max-Width : 100px ; /* FF IE7 */
Max-height : 100px ;   /* FF IE7 */
_ Width : Expression (this. width> 100 & this. width> This. Height? 100: auto) ;   /* IE6 */
_ Height : Expression (this. Height> 100? 100: auto) ;   /* IE6 */  
}

</Style>

</Head>

< Body >
< Div Class = "Album-pic-list" >
< IMG SRC = "PIC/pic_03.jpg"   />
< IMG SRC = "PIC/lo2.jpg"   />
</ Div >
</ Body >
</ Html >

 

But will the system prompt auto undefined? At first, I didn't put the JS that blocked the JS error, so I will prompt you. Later I put it, and IE seems to be down.

However, according to the compatibility prompt in this example, I added the keyword "IE6" to search and finally found a satisfactory

Http://bbs.80nian.net/viewthread.php? Tid = 154

 

CSS controls Image Scaling
< Script Language = "JavaScript" Type = "Text/JavaScript" >
<! --
Function Imgauto (I ){ // You must set the initial width and height for the image. We recommend that you set the maximum width and height directly.
VaR Maxw = 250 ; // Defines the maximum width of an image.
VaR Maxh = 250 ; // Defines the maximum height of an image.
VaR O = New Image (); O. SRC = I. SRC; VaR W = O. width; VaR H = O. height; VaR T; If (W > Maxw) {T = Maxw ;} Else {T = W ;}
If (H * T / W)> maxh) {I. Height = maxh; I. width = maxh / H * W ;} Else {I. Width = T; I. Height = T / W * h ;}
}
-->
</ Script >
< IMG SRC = "Http://bbs.tnbz.com/attachments/forumid_42/XP_IuSTD0jh5sSb.jpg" Width = "250" Height = "250" Onload = "Imgauto (this )" >