Solved

HTML Resize image based on the TD width

Posted on 2004-04-07
10
725 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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 your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
gzip in express of nodejs 12 67
Website like ebay or amazon 3 56
Problem to Popup 2 48
(URGENT) Help HTML and CSS Resizing Images 2 20
Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

707 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now