Image Resizing Help

@FinalDoomNov 20.2004

I want to resize a series of images in a page based on what the user’s screen resolution is. I already have the stuff to find the screen resolution, but I haven’t been able to find anything that I could use to resize the image.
I don’t want to make double images or double pages, because that would waste space. If the user has a resolution so that some picture will cause the horizontal scroll bar to appear, I want to resize that picture, say from 1157×586 (random numbers) porportionatly to 790×400 or something.

to post a comment

JavaScript

@JonaNov 20.2004 — #[font=trebuchet ms]Can you post the code you already have, or preferably a link to a page with what you have thus far?[/font]

@CharlesNov 20.2004 — #[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<script type="text/javascript">



</script>

</head>

<body>

<div><img alt="smile" src="http://www.webdeveloper.com/forum/images/icons/icon7.gif"></div>

</body>

</html>[/font]

@VladdyNov 20.2004 — #Look Ma no JS :rolleyes: :

www.vladdy.net/demos/ImageStyle.html

@Warren86Nov 20.2004 — #<HTML>

<Head>

<Script Language=JavaScript>

//------- Customization----------------

var dispW = 400;  // this is the  pop image display width
  var dispH = 300;  // this is the  pop image display height

// -- Do not edit below this line -------

var IMGStr = "";
  var largerView = "";
 
  function openReSize(Pix){
 
   if (largerView != ""){largerView.close()}
   isnullIMG.src = Pix; 
   wStr = isnullIMG.width;
   offsetW = wStr;
   wStr = wStr+20;
   wStr = "width="+wStr;
   hStr = isnullIMG.height;
   offsetH = hStr;
   hStr = hStr+20;
   hStr = "height="+hStr;
   lStr = (screen.width-50-offsetW)/2;
   lStr = "left="+lStr;
   tStr = (screen.availHeight-50-offsetH)/2;
   tStr = "top="+tStr;
   IMGStr = isdispIMG.innerHTML;
   largerView = window.open("","Managed","toolbar=0,status='',"+tStr+","+lStr+","+wStr+","+hStr+""); 
   largerView.document.open();
   largerView.document.write(IMGStr);
   largerView.document.close();
   IMGStr = ""; 
  }
 
  function buildSupport(){ 
 
   styleStr = "<Style> .placeHolder {Position:Absolute;Top:-2000;}</Style>";
   divStr = "<Div class=placeHolder ID=isdispIMG><IMG Src=Null width="+dispW+" height="+dispH+" ID=isnullIMG></Div>"
   document.write(styleStr);
   document.write(divStr);
  }
 
  window.onunload=function(){
 
   if (largerView != ""){largerView.close()}
  }
 
  buildSupport();

</Script>

</Head>

<Body>

<center>

<H3>Automatic centering and resizing of pop Image</H3>

<Img Src='Any.jpg' width='200' height='200' onclick="openReSize(this.src)"></a>

</center>

</Body>

</HTML>

Image Resizing Help

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image Resizing Help

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴