Resize Image

**suryadee** · 06-19-2012, 12:09 PM

Hi Guys

Just wondering if anyone can help me with my problem.

I want my image to resize, whether the window was dragged vertically or horizontally.

more clearer example: http://www.mickkmg.com

the image on the centre, when you pull your window in from the bottom or side, it will resize.

how would i apply this to any images?

many thanks

SD

**vwphillips** · 06-19-2012, 01:39 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function ResizeImage(id,r){
 var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.clientHeight:document.body.clientWidth*document.body.clientHeight;
 document.getElementById(id).style.width=Math.max(ww/r,50)+'px';
}


window.onresize=function(){
 ResizeImage('tst',2000);
}

/*]]>*/
</script>

</head>

<body>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />

<script  type="text/javascript">
/*<![CDATA[*/
ResizeImage('tst',2000);
/*]]>*/
</script>
</body>

</html>

**suryadee** · 06-20-2012, 04:20 AM

thanks Vic

would it be possible to run the same script but with image class rather than ID?

Also i need to embed this in a php file, which has image classes rather than ID.

many thanks for your help!

cheers

**bernie1227** · 06-20-2012, 05:49 AM

Originally Posted by suryadee

thanks Vic

would it be possible to run the same script but with image class rather than ID?

Also i need to embed this in a php file, which has image classes rather than ID.

many thanks for your help!

cheers

In answer, getElementByClassName is supported by most recent major browsers.
Bernie

**suryadee** · 06-20-2012, 06:38 AM

Originally Posted by bernie1227

In answer, getElementByClassName is supported by most recent major browsers.
Bernie

Thanks Bernie, would it be right to line the code like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

  <title></title>

<script type="text/javascript">

/*<![CDATA[*/



function ResizeImage(className,r){

 var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c  lientHeight:document.body.clientWidth*document.body.clientHeight;

 document.getElementByClassName(className).style.width=Math.max(ww/r,50)+'px';

}







window.onresize=function(){

 ResizeImage('tst',2000);

}



/*]]>*/

</script>



</head>



<body>

<img class="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />



<script  type="text/javascript">

/*<![CDATA[*/

ResizeImage('tst',2000);

/*]]>*/

</script>

</body>



</html>

cheers

**bernie1227** · 06-20-2012, 08:05 AM

Originally Posted by suryadee

Thanks Bernie, would it be right to line the code like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

  <title></title>

<script type="text/javascript">

/*<![CDATA[*/



function ResizeImage(className,r){

 var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c  lientHeight:document.body.clientWidth*document.body.clientHeight;

 document.getElementByClassName(className).style.width=Math.max(ww/r,50)+'px';

}







window.onresize=function(){

 ResizeImage('tst',2000);

}



/*]]>*/

</script>



</head>



<body>

<img class="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />



<script  type="text/javascript">

/*<![CDATA[*/

ResizeImage('tst',2000);

/*]]>*/

</script>

</body>



</html>

cheers

Looks alright to me, I'll check it again later, but just for future reference, please contain your code in [CODE] tags.

**vwphillips** · 06-20-2012, 08:25 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function ScaleImages(){
 var objs=document.getElementsByTagName('IMAGE'),cls,i,o,img,z0=0,z0a;
 ScaleImages.ary=[];
 for (;z0<objs.length;z0++){
  cls=objs[z0].className;
  if (cls&&cls.indexOf('scale:')>-1){
   cls=cls.split(';');
   o={obj:objs[z0]};
   for (z0a=0;z0a<cls.length;z0a++){
    i=cls[z0a].indexOf(':');
    if (i>2){
     o[cls[z0a].substring(0,i).toLowerCase()]=cls[z0a].substring(i+1);
    }
   }
   if (isFinite(o.scale)){
    ScaleImages.ary.push([o.obj,o.scale]);
   }
  }
 }
 ResizeImage();
}

function ResizeImage(id,r){
 var ary=ScaleImages.ary,ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.clientHeight:document.body.clientWidth*document.body.clientHeight,z0=0;
 for (;z0<ary.length;z0++){
  ary[z0][0].style.width=Math.max(ww/ary[z0][1],50)+'px';
 }
}


window.onresize=function(){
 ResizeImage();
}

/*]]>*/
</script>

</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="scale:2000;" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="scale:3000;" />

<script  type="text/javascript">
/*<![CDATA[*/

ScaleImages();

/*]]>*/
</script>
</body>

</html>

Thread: Resize Image

Thread Tools

Search Thread

Resize Image

Bookmarks

Bookmarks

Posting Permissions