JS implementation proportional Scaling picture

Sometimes our front-end page only 500x500 pixel width and high layout, but the background of the returned data picture is 1000x1000, then this case if I go straight back then the picture must be part of the show, In this case I would like to be able to develop on our front end to achieve the proportional scaling of the picture. For example, the following HTML code:

<div id= "Demo1" >

</div>

The CSS code is as follows:

#demo1 {Width:800px;height:300px;overflow:hidden;}

The outer div's CSS style is set to a width of 800 pixel height is 300 pixels, but the width and height of this picture are 1060 pixels and 300 pixels, and if we don't do anything, then the picture is going to have 260 pixels hidden away, and now we want the picture to be rendered According to the outer container 800 pixel x300 pixel width and height respectively proportional scaling, so no matter how much the width and height of the picture can be adaptive!

Here we can first see what the Jsfiddle effect is! The first picture is not any processing, the 2nd small is based on the width of 800 pixels proportional scaling.

Want to see the effect, please click me lightly!

The principle of proportional scaling of the known picture's width and height is:

The HTML code is as follows:

 <div id= 
"Demo1" >  
</div>

The CSS code is as follows:

#demo1 {Width:800px;height:300px;overflow:hidden;}

The JS code is as follows:

/**  * Proportional scaling of the width and height of a known picture  */ function knowimgsize (id) {    var idwidth = $ (id). Width (), &N Bsp

Width and height of the container         Idheight = $ (id). Height ();     $ (id + ' img '). each (function (index,img) {        var img_w = $ (

This). Width (),             Img_h = $ (this). Height ();        //If the picture itself is wider than the width of the container, proportional scaling          if (img_w > Idwidth) {              
          var height = img_h * IDWIDTH/IMG_W;             $ (this). css ({"width": idwidth, "height": Height
});

       }    }); &NBSP}  //Initialize  $ (function () {    knoWimgsize ("#demo1");  });

Because it is relatively simple here I do not provide demo download, the specific effect can be seen above the Jsfiddle link page!