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:

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


<!-- 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 LANGUAGE="JavaScript">
    	<!-- Begin
		//  End -->


Open in new window

Please see the attached embed script...
That is the script for the changing photos above...
Stiebel EltronAsked:
Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & 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
$('table td.getsize').each(function(){
  var w=$(this).width();

Open in new window

<table  border="1" cellpadding="1" cellspacing="1">>
    <td class="getsize" width="30%"><img src="" width="100";></td>
    <td class="getsize" width="20%"><img src="" width="100"></td>
    <td class="getsize"  width="50%"><img src="" width="100"></td>


Open in new window

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.
In previous HTML could have been:
<myTable ID="myTableID" onresize="myFunction">

<script type="text/javascript">
function myFunction() {
var newWidth=document.getElementByID("myTableID").width;
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!
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

I mean that the width property is not supported in HTML5 (see
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.
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...?
Stiebel EltronAuthor Commented:
That is what we need... Thank you so much Padas!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.