jquery Achieve equal scale zoom image

In the layout of the page, sometimes you will encounter a large picture will make the page container large, beyond the specified area,

At this point we need to scale the picture proportionally so that the large picture adapts to the page layout.

View Demo http://itmyhome.com/jquery_image_scaling/

1, the page is like a piece

2. Use jquery to zoom the image

<script type= "text/javascript" >window.onload = function () {var w = 500;//Sets the maximum width or is dynamically obtained based on the external container of the IMG, for example: $ ("#demo") . width (); $ ("img"). each (function () {///If there are many pictures, use each () to traverse var img_w = $ (this). width ();//Picture width var img_h = $ (this). Height () ;//Picture height if (img_w > W) {//If the picture width exceeds the specified maximum width var height = (w * img_h)/img_w;//height is equal to the scale $ (this). css ({"width": w, "height" : height});//set width and height after scaling}}); $ (document). Ready (function () {///In this case, do not use the "Do You Know" in jquery ...}) </script>

jquery Achieve equal scale zoom image