Summary of 4 ways to prevent tables from being broken when making web pages. I hope it will be useful to everyone!
1. Use <img src="/images/NullPic.gif" width="400" height="300"> to directly fix the size of the picture.
This method will not cause confusion in the page display, but the displayed pictures are often deformed.
Not recommended at all.
2. Use <img src="/images/NullPic.gif" >
This method will automatically scale down to the specified width when calling the image, without causing the image to deform, and will not burst the table. , so it will not cause confusion in page display.
But there is also a disadvantage. If the picture is too large, during the process of displaying the picture (downloading process), it will still be displayed in the original size of the picture. At this time, the table will be broken and the page will be ugly. Of course, the image will automatically shrink when it is fully displayed.
3. In order to prevent the picture from breaking the table, based on the above, restrict the table:
add some restriction codes to the table tag <table>, <table width="500" border="0" align="center" cellpadding ="0" cellspacing="0"> can effectively prevent the table from being stretched.
4. Going one step further, you can use the mouse wheel to zoom in and out of the picture:
<SCRIPT type=text/javascript>
function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
</SCRIPT>
The usage method is as follows:
<img src="/images/NullPic.gif" >
You can also use style:
img {
max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)
}