How to use CSS to adjust the image size of the instance code share

In general, we can set a CSS property for picture to define its height and width. But sometimes we just want to control the maximum visible size of the picture. There are generally two ways to do this: 1. Use CSS property values directly, 2. Dynamically set CSS values using JavaScript.

One, fixed size
In general, to limit the size of a picture, it is defined using the following HTML property values or CSS property values:

img {    width:600px;    height:500px;}

But this kind of setup is too rigid, not flexible enough.

Second, the use of CSS property values

img.qtipimg {    max-width:500px;     width:500px;    Width:expression (This.width > 500?) "500px": this.width);    Overflow:hidden;}

The

defines an IMG tag under the Qtipimg class with a CSS rule that controls the width of the image in 500px through the Max-width attribute, and is an adaptive scale.
However, the support for this property is inconsistent across browsers, such as IE6 does not support this property.
Therefore, an expression is added later, and the statement in parentheses after the operator is a JavaScript script for dynamically resizing the picture.
and finally, the Overflow:hidden is to prevent the above two attribute definitions from being invalidated, to hide the part that exceeds the set size, and to avoid displaying exceptions.
This setting has been tested and is normally used in IE7, IE8, and FireFox 3.5.

Iii. using JavaScript scripts
Support for CSS is different for each browser (including versions). For example, IE 8 cancels the support for expression action. It's also a good idea to use JavaScript to resize a picture. But the flaw is that with a pure JavaScript script, the size will overflow during the download of the image until the download is complete and JavaScript will resize it to the appropriate value.
1, with the help of a brokered image object
Two JavaScript functions:

function getimagesize (FilePath) {     var imgsize={width:0,height:0};     Image=new Image ();     Image.src=filepath;     Imgsize.width = Image.width;     Imgsize.height = image.height;     return imgsize;   } function Fiximagesize (originalimage) {  fixsize = $;  if (Originalimage.width > Fixsize) {    originalimage.height = Math.Round (Originalimage.height * fixsize/original Image.width);    Originalimage.width = fixsize;  }  return originalimage;}

When using, pass the address of the picture to these two functions, the return value is the adjusted Picture:

img = getimagesize ("http://www.linuxfly.org/logo.gif"); img = Fiximagesize (img); finalresult = ' 

2. Resize after Dom is loaded
Although the expression method of CSS will be canceled, it is a good idea to use JavaScript to calculate the appropriate CSS values directly. For example, jquery's $ (document). Ready () method avoids the problem of overflow when loading pictures.
The following script comes from: here

$ (document). Ready (function () {$ ('. Post img '). each (function () {var maxWidth = 1 00;    Picture Max width var maxheight = 100;  Picture Maximum height var ratio = 0;    Scale var width = $ (this). width ();  Picture actual width var height = $ (this). Height ();   Picture actual height//check if the picture is super wide if (Width > maxWidth) {ratio = Maxwidth/width; Calculates the zoom ratio $ (this). CSS ("width", maxWidth);    Set the actual display width height = height * ratio;  Calculates the height of the equal scale after $ (this). CSS ("height", height * ratio); Set the height of the equal scale}//Check if the picture is superelevation if (height > maxheight) {ratio = Maxheight/height;//Calculate scale $ (thi   s). CSS ("height", maxheight);    Set the actual display height width = width * ratio;    Calculates the height of the equal scale after $ (this). CSS ("width", width * ratio); Set the height of the equal scale}});