How to auto-resize photos inside table cell?

Dear EE experts,

We would like to ask for tech support on how to set the photos inside our table cell resize automatically if the table width expands...
You may see it here: http://www.cssasia.info/ste/ste-landscape-units1.asp?SeriesID=184

If the photos that we uploaded reached 5 photos, it will expand its size, but the photo above stays the same (size)...

<HTML>
<head>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'IMG/xg-header-00.jpg'
theImages[1] = 'IMG/xg-header-01.jpg'
theImages[2] = 'IMG/xg-header-02.jpg'
theImages[3] = 'IMG/xg-header-03.jpg'
theImages[4] = 'IMG/IL-header.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//  End -->
</script>


</head>
<body>
<td>
    	<SCRIPT LANGUAGE="JavaScript">
    	<!-- Begin
		showImage();
		//  End -->
		</script>
</td>
</body>

</HTML>

Open in new window

Please see the attached embed script...
That is the script for the changing photos above...
Stiebel EltronAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sar1973Commented:
In previous HTML could have been:
<myTable ID="myTableID" onresize="myFunction">

<script type="text/javascript">
function myFunction() {
var newWidth=document.getElementByID("myTableID").width;
document.getElementByID("myPictureID").width=newWidth;
}
</script>
0
Stiebel EltronAuthor Commented:
Hi Sar1973! Thank you for your response...

We're quite confused, what do you mean by "In previous HTML could have been..."?

Though we only have that code, same code in every page.

Please explain...

Thank you!
0
Sar1973Commented:
I mean that the width property is not supported in HTML5 (see http://www.w3schools.com/tags/tag_table.asp).
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sar1973, I do think you are on to the answer here, http:Q_28250136.html#a39523845

I would use javascript or jquery to determine the width of each td you will be placing an image in.  Once you know the width of the TD, you can size the width of the image.  As long as all images have the same width/height ratio it will be easy.
0
Sar1973Commented:
I think that my comment didn't neither include or exclude any eventuality and was useful for stiebel: why punctualising and enphatising it so much...?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What I was getting at is to use jquery or javascript to resize the image to match the td width.

This is a working sample http://jsbin.com/eqEqEqi/1/
jquery
$('table td.getsize').each(function(){
  var w=$(this).width();
  console.log(w);
  $(this).find('img').width(w+'px');
});

Open in new window

html
  <div>
<table  border="1" cellpadding="1" cellspacing="1">>
  <tr>
    <td class="getsize" width="30%"><img src="http://osliving.com/sourced/wp-content/uploads/open_beer_project.jpg" width="100";></td>
    <td class="getsize" width="20%"><img src="http://osliving.com/sourced/wp-content/uploads/open_beer_project.jpg" width="100"></td>
    <td class="getsize"  width="50%"><img src="http://osliving.com/sourced/wp-content/uploads/open_beer_project.jpg" width="100"></td>
  </tr>

</table>
  </div>

Open in new window

css
div {width:500px;}

Open in new window


All you would need to do is to add the jquery to your page and add the class getsize to each td you want the image to resize.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Stiebel EltronAuthor Commented:
That is what we need... Thank you so much Padas!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.