Recently, I encountered a problem when I developed the image display function for xuele.com: There are two rows in a table, and the picture is displayed on the top (the size is random). The following shows the description of the image (the text length is random) 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 this method, the solution is: you do not need to specify the image size in the code, cross-browser, very simple. 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:
|
The last flag of the Hong Kong colony, composed of the British blue flag and the colony emblem representing Hong Kong, 1959-1997 |
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.
