How to control the size of a picture in CSS

One, the Web page production Technique example solves: uses the CSS to control the picture adaptive size

Picture Auto-fit size is a very common function, in the production time in order to prevent the picture to open the container and the size of the picture necessary to control, we can use CSS to control the image to make it adaptive size?

We think of a relatively simple solution, although not very perfect, if your requirements are not very high, has been able to meet your needs. Let's look at the following code:

P img {max-width:600px;width:600px;width:expression (document.body.clientwidth>600? ") 600px ":" Auto "); Overflow:hidden;}

max-width:600px; The maximum width of IE7, FF and other non-IE browsers is 600px. However, it is not valid in IE6.

width:600px; The size of the picture in all browsers is 600px;

When the image size is greater than 600px, it automatically shrinks to 600px. Valid in IE6.

Overflow:hidden; Beyond the hidden parts, to avoid controlling the image size failure caused by the open deformation.

Second, sometimes the picture is too large, will break the layout of the Web page neatly. You can then use CSS to force proportionally compressing the height or width of the picture.

The CSS code is as follows:

Img,a img{border:0; margin:0; padding:0; max-width:590px; Width:expression (this.width>590? ") 590px ": this.width); max-height:590px; Height:expression (this.height>590? ") 590px ": this.height); }

If the height or width of the image exceeds 590px, it will be compressed proportionally to 590px, if not more than the original size.