Solved

HTML Resize image based on the TD width

Posted on 2004-04-07
10
745 Views
Last Modified: 2012-08-13
Can anyone please tell me how to increase the image size based on width.

I got a reply for this I am pasting the code below

 Comment from dgelinas
Date: 03/30/2004 05:33AM PST
 Comment  


sure,

</script>
function resizeImage() {
  document.getElementById('img1').width =  document.getElementById('td1').offsetWidth
}
<script>



  <td id='td1'>
  <img id='img1' src='/images/whatever.gif'>

 
Comment from dgelinas
Date: 03/30/2004 06:10AM PST
 Comment  


better yet here's a working test I used.. obviously you won't have my image but you can replace it with yours

<html>
<head>
<script language="javascript" type="text/javascript">
function resizeImage() {
  document.getElementById('img1').width =  document.getElementById('td1').offsetWidth
}
</script>

</head>

<body onLoad="resizeImage()">


<table width="183"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id='td1'><img id='img1' src="logo2.gif" width="5" height="50"></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>  

</body>
</html>
 
 
BUT THE ABOVE CODE works if there is one image and TD . I am generating images and TD dynamically. How should I go about doing this.

Please guide me.
0
Comment
Question by:BLN2004
10 Comments
 
LVL 28

Expert Comment

by:peakpeak
ID: 10781679
Maybe like this ...

function resizeOneImage(imgname, tdid)
 {
  document.getElementById(imgname).width =  document.getElementById(tdid).offsetWidth
}

function getElementsById(imgname, id)
{
  var inc = 0;
  var alltags = document.all ? document.all : document.getElementsByTagName("*");
  for (i = 1; i < alltags.length; i++)
    if (alltags[i].id == id)
      reziseOneImage(imgname, id);
}
<body onload="getElementsById('img1', 'td1');" >
....
<td id='td1'><img id='img1' src="logo1.gif" width="5" height="50"></td>
<td id='td1'><img id='img1' src="logo2.gif" width="5" height="50"></td>
<td id='td1'><img id='img1' src="something_else.gif" width="5" height="50"></td>
....
</body>

Regards
Peter
0
 
LVL 28

Accepted Solution

by:
peakpeak earned 50 total points
ID: 10782081
Oops, forget my previous post, here's a working one
Select te same id for every <td> and <img>, different name for each <img>
onLoad="resizeImages('b');" with the <td> and <img> id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
<!--
function resizeOneImage(imgname, tdid)
{
      document.getElementById(imgname).width =  document.getElementById(tdid).offsetWidth;
}
var fields = new Array();      // Global array for the field objects we want
////////////////////////////////////////////////
// Resize all images with a specific id
//
function resizeImages(id)
{
      var inc = 0;
      var alltags = document.all ? document.all : document.getElementsByTagName("*");
      for (i = 1; i < alltags.length; i++)
      {
            if (alltags[i].id == id)
            {
                  fields[inc++] = alltags[i];      // Save the object in the array
            }
      }
      for (i = 0; i < fields.length; i++)      
      {
            if (fields[i].name)
                  resizeOneImage(fields[i].name, id);
      }
      return inc;
}
//-->
</SCRIPT>
</head>
<BODY onLoad="resizeImages('b');">
<table width="280"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="b"><img id='b' name="img1" src="imgage1.gif"></td>
    <td id="b"><img id='b' name="img2" src="imgage2.gif"></td>
    <td id="b"><img id='b' name="img3" src="other.gif"></td>
  </tr>
</table>
</body>
</html>

Regards
Peter

0
 
LVL 7

Assisted Solution

by:TheKenman
TheKenman earned 50 total points
ID: 10783014
Hi BLN2004,

Try this:

   <html>
   <head>
   <script language="javascript">  
   function resiz() {
      var imgs = document.images;
      for(i=0;i<imgs.length;i++)
      {
      var img = imgs[i];
         if (document.all) {
            img.width = img.parentElement.width;
            img.height = img.parentElement.height;  
         } else {
            img.width = img.parentNode.width;
            img.height = img.parentNode.height;  
         }
      }
   }
   </script>  
   </head>
   <body onLoad="resiz();">
   <table width="183"  border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td id='td1'><img id='img1' src="logo2.gif" width="5" height="50"></td>
     </tr>
     <tr>
       <td></td>
     </tr>
   </table>
   </body>
   </html>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:dgooding
ID: 10783299
0
 
LVL 6

Expert Comment

by:Reapz
ID: 10787979
Setting the width and height of the image to 100% means it will stretch and shrink to fit the table cell it occupies. As the user resizes their browser window your picture will resize automatically.
0
 

Author Comment

by:BLN2004
ID: 10820088
I tried the below code

<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
<!--
function resizeOneImage(imgname, tdid)
{
     document.getElementById(imgname).width =  document.getElementById(tdid).offsetWidth;
}
var fields = new Array();     // Global array for the field objects we want
////////////////////////////////////////////////
// Resize all images with a specific id
//
function resizeImages(id)
{
     var inc = 0;
     var alltags = document.all ? document.all : document.getElementsByTagName("*");
     for (i = 1; i < alltags.length; i++)
     {
          if (alltags[i].id == id)
          {
               fields[inc++] = alltags[i];     // Save the object in the array
          }
     }
     for (i = 0; i < fields.length; i++)    
     {
          if (fields[i].name)
               resizeOneImage(fields[i].name, id);
     }
     return inc;
}
//-->
</SCRIPT>
</head>
<BODY onLoad="resizeImages('b');">
<table width="280"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="b"><img id='b' name="img1" src="imgage1.gif"></td>
    <td id="b"><img id='b' name="img2" src="imgage2.gif"></td>
    <td id="b"><img id='b' name="img3" src="other.gif"></td>
  </tr>
</table>
</body>
</html>


THE IMAGE IS SMALL IN THE FIRST CELL SLOWLY IT INCREASSES IN THE LAST CELL IT FITS THE TD
0
 
LVL 7

Expert Comment

by:TheKenman
ID: 11938972
I recommend a split between peakpeak and myself :)
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question