A variety of ways to prevent the form from being stretched or the div layer being stretched

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

When we design Web pages, there will always be some unpleasant things, the most common is to add content in the background only to find that the page is open, resulting in extremely bad web pages. In the past, we are basically design forms, many of the online nature of the solution, and now there are div standard design, and rarely see the relevant good methods, now Xiaoxiang online to find the usual prevention of the form is open to sum up a good method to share with you.

One, directly in the page set picture size, such as code: <IMG src= "http://www.krjpg.cn/www.xxol.net.jpg" width= "height=" "border=" "0" ", This can limit the size of the picture, but need to manually modify the picture before uploading the image size, or upload the image will be distorted.

Second, use the following code: <IMG src= "Http://www.krjpg.cn/www.xxol.net.jpg" onload= javascript:if (this.width>600}{ this.resized=true;this.style.width=600} " >

This method automatically shrinks proportionally to the specified width when the picture is called. Will not cause the deformation of the picture, and will not burst the table, but the disadvantage is that if the picture is too large, in the picture download process, that is, the picture display process, will be the original size of the picture display, then will burst the table, the page is difficult to see, Second, when the picture is fully displayed, the picture will shrink automatically.

Third, we can limit the size of the table to prevent being stretched, such as in the <table width= "border=" 0 cellpadding= "0" cellspacing= "0" > Add code "style=" Table-layout:fixed;word-wrap:break-word;word-break;break-all; "", of which "table-layout:fixed; "is to keep the table layout fixed, you can effectively prevent the table from being stretched," word-wrap:break-word; "is the control of line-wrapping, that is, enforcing line-wrapping, which in the case of more text content needs to be used, especially repeated content appears, do not carry out line, the table was stretched;" Word-break:break-all; "You can solve the problem of IE's frame being propped up by English (non-Asian text lines), but it will not force a newline, only the contents of the table width. In general, as long as the "style=" Table-layout:fixed;word-wrap:break-word; You can. Of course, the statements called above can be defined in CSS, such as
Table {
table-layout:fixed;
Word-wrap:break-word;
}

Four, with the CSS control picture Adaptive size, code such as:
IMG {
max-width:600px;
Width:expression (This.width > 600?) "600px": this.width);
Overflow:hidden;
}
of which max-width:600px; In IE7, Firefox and other non-IE browsers the maximum width of 600px, but in the IE6 invalid; width:600px;  In all browsers, the size of the picture is 600px, when the picture size is greater than 600px, automatically reduced to 600px, in IE6 effective; overflow:hidden; It means to hide parts that are outside the size of the setting to prevent the form from being stretched and distorted by the failure to control the size of the picture.

Finally, summarize the most useful code:
If this is a table, please use:
Table {
table-layout:fixed;
Word-break:break-all;
}
If this is a DIV layer, please use:
div {
table-layout:fixed;
Word-wrap:break-word;
Width: plus breadth;
Overflow:hidden; Let the more out of the show. )
}