Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML Resize image based on the TD width

Posted on 2004-04-07
10
Medium Priority
?
766 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 200 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 200 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 6

Expert Comment

by:Andy
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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
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 look for a specific file type in a local or remote server directory using PHP.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

916 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