How CSS controls the image size

Example of how to create a web page: Use CSS to control the adaptive size of images

Automatic Image Resizing is a very common function. When making images, you must control the image size to prevent them from being opened in the container, can we use CSS to control the image size to make it adaptive?

You can scale down or zoom in to a certain size (specified by yourself) to keep the image completely displayed without deformation.

Solution:

1. For standard browsers (such as Firefox) or newest IE 7 browsers, use the CSS attributes of max-width, Max-height; or Min-width and Min-height. For example:

We have come up with a simple solution, although not perfect. If your requirements are not very high, they can already meet your needs. Let's look at the following code:

img{  max-width:100px;  max-height:100px;  overflow:hidden;}

2. for IE 6 and earlier browsers, you can use the expression attribute supported by IE6 to embed Javascript code in CSS code to scale the image:

img{   width:expression(this.width>150?"150px":this.width);   height:expression(this.height>150?"  150px":this.height); }

3. Perfect solution

img{   border:0;   margin:0;   padding:0;   max-width:150px;   width:expression(this.width>150?"150px":this.width);   max-height:150px;   height:expression(this.height>150?"  150px":this.height); }

Reference address:

Http://www.cnblogs.com/liukai/archive/2009/12/29/1635397.htmlhttp://www.php100.com/html/webkaifa/DIV_CSS/2008/1124/2362.html