Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML Resize image based on the TD width

Posted on 2004-04-07
10
Medium Priority
?
762 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 
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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

688 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