This leads to a problem. If the image is too small or the text is too long, the text will make the entire table very large, that is, it occupies a lot of space, and the display effect is also very bad.
There are also many solutions on the Internet, but they are either complicated or cannot solve cross-browser problems, or cannot adapt to image size changes.
In my method, the solution is solved: you do not need Code It is very easy to specify the image size across browsers. The final effect is shown in. When the text is too long, it will automatically wrap the line to adapt to the image width:
The method is as follows:
1) the image and image instructions are as follows:
<Table class = "mod_img" width = "10" align = "Left" border = "0" cellpadding = "0" cellspacing = "0"> <tbody> <tr> <TD align = "center"> <a Title = "click to view the original image" href = "/upload/20090214135145954.png" target =" _ blank "> </a> </TD> </tr> <TD align =" center "> <Div class = "mod_img_desc"> the last flag of the Hong Kong colony, composed of the British blue flag and the emblem of the colony representing Hong Kong, September 1959-September 1997 </div> </TD> </tr> </tbody> </table> 2) the definition of "mod_img" is as follows. It specifies the CSS style of the table and image border:
. Mod_img {margin: 6px; Border: 1px solid # aaaaaa; padding: 3px ;}
. Mod_img IMG {margin: 3px; Border: 1px solid # aaaaaa; padding: 0px ;}
3) The definition of "mod_img_desc" is as follows:
. Mod_img_desc {font-size: 12px; Word-break: Break-all; width: 100%; overflow: auto ;}
The key here is the top width = "10", which is the key to text Adaptive Image Width. In fact, 10 is a very small value. Generally, images are larger than this value, when an image is displayed in the table, the image is opened based on its actual size. Therefore, the width does not affect the display of the image) the text width is 100%, that is, the text is displayed according to the actual width, regardless of the width, when the text exceeds the width, the line breaks automatically.
After testing, this method works perfectly in IE, Firefox, Safari, opera, and other browsers! Have a good time.
