Introduction to how to control image size in CSS

1. Web page production skills example solution: Use CSS to control the adaptive size of images

Automatically adapt to the size of images is a very common function, when making In order to prevent the image from opening the container, we need to control the size of the image. Can we use CSS to control the image so that it adapts to the size?

We have thought of a relatively simple solution. Although it is not perfect, if your requirements are not very high, it can already 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 is 600px under IE7, FF and other non-IE browsers. But it doesn't work in IE6.

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

　◎ When the image size is larger than 600px, it will be automatically reduced to 600px. Valid in IE6.

　◎ overflow:hidden; Hide the excess part to avoid stretching and deformation caused by failure to control the image size.

#2. Sometimes the picture is too large, which will destroy the neat layout of the web page. At this time, you can use css to force the height or width of the image to be compressed proportionally

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); 
}

In this way, if the height or width of the image exceeds 590px, it will be proportional Compress to 590px. If it does not exceed, it will be displayed at the original size.

The above is the detailed content of Introduction to how to control image size in CSS. For more information, please follow other related articles on the PHP Chinese website!