Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Dynamic image resizing according to location

Dynamic image resizing according to location

06/03/2011 by Dux   -   3.7/5 (3 ratings)

This javascript method resize image according to its location in the page. Images do not overflow the page or div that contains them.
It works automatically, it is not necessary to modify the HTML content of the body.

Implementation :
- copy the javascript code in the header, between <head> and </head>
- In the body opening tag, use onload to run the function
<body onload="resizeIMG()">

See a demonstration of this script in action :

Open in a new window     Open in the same window

source code



 
<script type="text/javascript">
   function
resizeIMG() {
       function
resizeW(elm) {
           var
prt = elm.parentNode;
           
// Parent width
           
var widthPrt = (prt.offsetWidth) ? prt.offsetWidth : prt.style.pixelWidth;
           
// Parent padding left and right
           
if (prt.style.paddingLeft) widthPrt -= parseInt(prt.style.paddingLeft) + parseInt(prt.style.paddingRight);
           
// Image width
           
var widthImg = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
           if (
widthImg > widthPrt) elm.style.width = widthPrt + "px";
       }
       for (
i = 0; i < document.images.length; i++) resizeW(document.images[i]);
   }
</script>

Tested with Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  IE8  
Rate this code     |     Copied : 33x

Comments for Dynamic image resizing according to location

No comment
Add a comment Nickname
ZOOM