How to FIX a table size so image cannot cannot grow?

JGKWORK · Jun 15, 2004

Hi,

I have a very simple table with one TR and a cell. I am inserting dynamic images (one at a time) in to this table.

I need to FIX this table so that no matter how BIG the image is, it does not increase the pre-determined size of the table. I still want to allow the images to reduce in size though.

Is there a simple way of doing this?

I have tried fixing the table size e.g. width="250" with no luck and fixing the image size is no good because smaller images are stretched.

MANY thanks...

WizyWyg · Jun 15, 2004

are you using backend scripting like ASP/PHP/CFM ?
You can control the "size" of an image based on if...else statements.

tviman · Jun 15, 2004

This can't be done in HTML. Tables will always expand to accomodate the content in the cells. As WizyWig points out, you'll need a method to resize each image either dynamically of resize all images to fit the table.

There's always a better way. The fun is trying to find it!

vongrunt · Jun 15, 2004

Limit image width instead. max-width will cover Bugzilla&co, dynamic expression IE (actually I recycled one similar example from Vragabond):

Code:

<style type="text/css">
.blah
{	max-width: 250px;
	width: expression(Math.min(this.width, 250));
}
</style>

<table width="250" border="1">
<tr>
	<td align="center"><img class="blah" src="test.jpg"></td>
</tr>
</table>

Still... if original images are much larger than 250px consider making thumbnails.

BillyRayPreachersSon · Jun 16, 2004

I've not tried it, but would something like this work:

Code:

<td style="width:100px;height:20px;overflow:hidden">

Hope this helps,
Dan

WizyWyg · Jun 16, 2004

Billy ray

good, but taht would "cut" an image. If it was 600 pixels, but he only wants 250 pixels allowable, more than half would be cut.

BillyRayPreachersSon · Jun 17, 2004

Trye - I hadn't read the post fully (that'll teach me!)...

You could try combining my previous post with JavaScript code that dynamically sized images based in the size of their containing element - that should give the desired result.

Hope this helps,
Dan

JGKWORK · Jun 17, 2004

Hi,

many thanks for the suggestions, very helpful. One quick question, can someone briefly explain what this line of code is actually doing? and if they can be botherd, how its doing it?

expression(Math.min(this.width, 250));

MANY thanks!

JGKWORK · Jun 18, 2004

Any body? I'm craving the knowledge!! Thanks

vbkris · Jun 18, 2004

this.width - the cell's width

Math.min(this.width, 250) - Minimum of above and 250...

Known is handfull, Unknown is worldfull

medic · Jun 21, 2004

tviman,

This can't be done in HTML. Tables will always expand to accomodate the content in the cells. As WizyWig points out, you'll need a method to resize each image either dynamically of resize all images to fit the table.

Not exactly true.
Have you checked this FAQ? faq215-4499

tviman · Jun 21, 2004

Medic - I stand corrected - thanks for the info.

There's always a better way. The fun is trying to find it!

BillyRayPreachersSon · Jun 22, 2004

>> Have you checked this FAQ? FAQ215-4499

Does that FAQ stand true for images that are larger than the cells, too? I know it says "regardless of contents", but images nomally have to specifically be resized to shrink, and I see none of that code in the FAQ.

Just a thought ;o)

Dan

JGKWORK · Jun 22, 2004

Thanks all..

medic · Jun 22, 2004

Yes, Dan.

And I believe that FAQ can help simplify the solution to JGKWORK's problem. I just want to make it clear here that the FAQ was specifically designed to address the table-width issues (not resizing of its contents). But it is a good starting point.
Try this out:

Code:

[blue]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL][/blue]
<HTML>
<BODY>
<table border=1 [blue]width=[b]200[/b] style='[b]table-layout:fixed;[/b]'[/blue]>
 [blue]<col width=[b]130[/b]>[/blue]
 [blue]<col width=[b]70[/b]>[/blue]
 <tr>
  <td>First Column</td>
  <td>Second Column</td>
 </tr>
 <tr>
  <td><IMG src="MyImage.gif" [blue]height="100%" width="100%"[/blue]></td>
  <td><IMG src="MyImage.gif" [blue]height="100%" width="100%">[/blue]</td>
 </tr>
</table>
</body></html>

This time, I had to add the DOCTYPE to make the image resizing work.

medic · Jun 22, 2004

By the way (for the sake of those who are new to this method), the image will appear cropped if the resizing technique is not implemented. ;-)

BillyRayPreachersSon · Jun 22, 2004

If you add my earler suggestion to medic's code, you can get the images to shrink to match their container's size:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<script type="text/javascript">
	<!--
		function resizeTableImages() {
			var images = document.getElementById('myTable').getElementsByTagName('img');
			for (var loop=0; loop<images.length; loop++) {
				var img = images[loop];
				if (img.width > img.parentNode.clientWidth) img.width = img.parentNode.clientWidth;
			}
		}
	//-->
	</script>
</head>
<body onload="resizeTableImages();">
	<table border="1" width="200" style="table-layout:fixed;" id="myTable">
		<col width="130">
		<col width="70">
		<tr>
			<td>first column</td>
			<td>second column</td>
		</tr>
		<tr>
			<td><img src="myimage.gif"></td>
			<td><img src="myimage2.gif"></td>
		</tr>
	</table>
</body>
</html>

Not sure how cross-browser compatile this is, however.

Hope this helps,
Dan

medic · Jun 22, 2004

Dan,

That doesn't work with Netscape 7.1 (just in case you have concern about Netscape users).

BillyRayPreachersSon · Jun 22, 2004

Thanks for that - I'm guessing that the "clientWidth" property being IE only, then!

Dan

medic · Jun 22, 2004

Oops! mine doesn't work in Opera 7. [blush]

However, our solutions both work in Mozilla Firefox. That means your script is not exclusive to IE.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to FIX a table size so image cannot cannot grow?

IS-IT--Management

Technical User

Programmer

Programmer

Programmer

Technical User

Programmer

IS-IT--Management

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor