jquery implementation proportional Scaling picture size example

1. Know picture height and width

When the page loads the picture contains attribute width and height value, you can use a few simple jquery code to achieve proportional scaling, or through the JQ built-in function to get the picture width and height.

The code is as follows

Copy Code

$ (function () { var w = $ ("#demo1"). width ();//container widths $ ("#demo1 img"). each (function () {//If there are many pictures, you can jq the built-in each () traversal var img_w = $ (this). width ();//Picture widths var Img_h = $ (this). Height ();//Picture Heights if (img_w>w) {//If the picture is wider than the width of the container-it's going to burst. var height = (w*img_h)/img_w; Height ratio Scaling $ (this). css ({"width": w, Height: height})//set width and height after scaling } }); });

Hey, it's simpler than JS! Minute to finish the article content page multiple map size caused "out of line" problem!

2. Unknown picture size

When the page load picture size is not known, the above code can not be effectively scaled, this situation more than the current collection of external linked pictures.

The code is as follows	Copy Code
<div id= "Demo2" > </div>

Fortunately, a good friend has written a special plug-in to deal with, and across the browser, to solve the front-end friends of a big problem.

Below is a grand introduction to the next autoimg.

Calling the Autoimg plug-in method is fairly straightforward:

code is as follows	copy code
$ (function ( { $ ("#demo2"). Autoimg (); });