<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.111cn.net/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> code for proportional scaling of css images </title>
<Style type = "text/css">
The code is as follows: |
Copy code |
. Thumbimg {max-width: 530px; max-height: 530px;}/* for firefox & ie7 */ * Html. thumbimg {width: expression (this. width> 530 & this. width> this. height? & Quot; 530px & quot;: auto); height: expression (this. height> 530? "530px": auto);}/* for ie6 */ |
// Method 2
The code is as follows: |
Copy code |
Img { Width: expression (this. offsetwidth> 160? 160: true);/* modify the image width by yourself */ Height: expression (this. offsetheight> 180? 180: true);/* modify the image height by yourself */ } |
// Method 3
The code is as follows: |
Copy code |
Div { Display: table-cell; /* Set Block elements as table elements */ Vertical-align: middle; /* Set the horizontal center */ Text-align: center; /* Hack for ie */ * Display: block; * font-size: 180px; /* Set the font size to the height of the layer */ * Font-family: arial; /* Preventing hack failure caused by non-UTF-8 */ Width: 160px; /* Modify the layer width by yourself */ Height: 180px; /* Modify the layer height by yourself */ Border: # ccc 1px solid; /* Display layer Border */ } Div img { Vertical-align: middle; /* Set the vertical center of the image */ Width: expression (this. width & gt; 160? 160: true ); /* Modify the image width by yourself */ Height: expression (this. height> 180? 180: true ); /* Modify the image height by yourself */ } |
// Method 4
The code is as follows: |
Copy code |
# Thumbimaged img { Max-width: 120px; Max-height: 140px; } /* For firefox & ie7 */ # Thumbimaged img { /* For ie6 */ Width: expression (this. width> 120 & this. width> this. height? "140px": auto ); Height: expression (this. height> 120? "140px": auto ); } |
Method 5
The code is as follows: |
Copy code |
Width: expression (this. width> 100 & this. width> this. height? 100: true); height: expression (this. height> 100? 100: true ); |
</Style>
</Head>
<Body>
</Body>
</Html>