A method to control the adaptive size of pictures with CSS

css| Control | adaptive

Web page production techniques to solve: the use of CSS control image adaptive size

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

We think of a relatively simple solution, although not very perfect, if your request is not very high, already can meet your needs. Let's look at the following code:

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

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

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

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

Overflow:hidden; Beyond the part of the hidden, to avoid control of the image size failure caused by the distraction deformation.