How CSS code makes a picture adaptive to display width

A larger picture will affect the layout of the page. The ideal solution is naturally to generate thumbnails automatically, involving the background work is more complex, with CSS control is an acceptable shortcut.

It seems too smart to force the display size with the Width property. Luckily, Firefox/opera/ie 7 provides support for Max-width properties. Suppose you want the picture to show a width of not more than 500 pixels, CSS may be as follows:

The following is a reference fragment:

The following is a reference fragment:
Fit-image {
border:0;
max-width:500px;
}

IE6 does not support max-width properties, but using IE's unique expression attribute can be used to solve the problem in a roundabout way.

The following is a reference fragment:

The following is a reference fragment:
Fit-image {
border:0;
max-width:500px;
Width:expression (
Function (IMG) {
Img.onload=function () {
This.style.width = ';
This.style.width = (This.width > 500)? " 500px ": this.width+" px "
};
Return ' 120px '//load display width of 120px
} (This)
);
}

Use the OnLoad events to calculate the size of a picture after it has been loaded, or display its default width if it is 500 pixels above 500 pixels.

Expression is not a web-standard practice and should not be used without recommendation. However, we must admit that many of the expansion of IE is good, ie should not be despised!