<Html>
<Head>
<Style type = "text/css">
<! --
Img. pic {
Max-width: 300;
Max-height: 100px;
/* Because IE6.0 and earlier versions of IE do not support the above two attributes, add the following two statements. here we need to note that expression only supports IE */
Width: expression (this. width> 300 & this. width/300> = this. height/100? 300: true );
Height: expression (this. height> 100 & this. width/300 <this. height/100? 100: true );
}
// -->
</Style>
</Head>
<Body>
<Div id = "pic">
</Div>
</Body>
</Html>
In the code above, it is inconvenient to set the maximum length and width to a number, so the following changes are made:
<Html>
<Head>
<Script type = "text/javascript">
<! --
Object. MAX_WIDTH = 400;
Object. MAX_HEIGHT = 300;
-->
</Script>
<Style type = "text/css">
<! --
Img. pic {
Max-width: 300px;
Max-height: 100px;
Width: expression (this. width> Object. MAX_WIDTH & this. width/Object. MAX_WIDTH> = this. height/Object. MAX_HEIGHT? Object. MAX_WIDTH: true );
Height: expression (this. height> Object. MAX_HEIGHT & this. width/Object. MAX_WIDTH <this. height/Object. MAX_HEIGHT? Object. MAX_HEIGHT: true );
}
// -->
</Style>
</Head>
<Body>
<Div id = "pic">
</Div>
</Body>
</Html>
In this case, you only need to modify the Object. MAX_WIDTH and Object. MAX_HEIGHT variables to easily modify the maximum length and width.
Consecutive letters or other special characters cannot cause automatic line breaks. The solution is to use the following method:
In fact, CSS contains a style called word-wrap. Set it to break-word, and set the cell width, so there is no need to wrap it in the program. As shown below.
Table style = "table-layout: fixed; word-break: break-all; word-wrap: break-word; overflow-x: hidden" width = "500"
However, this usage in the Mozilla browser does not seem to work.