PDA

View Full Version : Table and TD with pictures stretching



Beauford
Jun 29th, 2009, 09:22 PM
I have read a million, ok, maybe 999,000 articles on this and still have no idea how to solve it.

I allow users to link photobucket pictures to their profiles on my site, but there is only enough width for 450px.

If someone put in one that is 680px, it screws up the formatting royally. You can tell users all you want to upload the right size, but to no avail.

I have tried putting this in: <img width='100%' height='100%' src=, but then all pictures are all 100% wide - even if they are 5x5 pics.

Is this even possible to get the pic to stay within the boundries I set out in the table or <td>. I'll even take a javascript solution if sonmeone has one, although outside of this forum I know.

Thanks

021414
Jun 29th, 2009, 10:44 PM
you can try adding predefined css tags, like every image uploaded should follow this class:



<img src="url" class="imageResize">


And in the css, predefine the width/height of the image:



.imageResize{
width:450px;
max-width:450px;
}


Hope that helps.

Mike_O
Jun 29th, 2009, 10:49 PM
Hey Beauford,

lol, Simply asking users not to upload images greater than a certain size is like asking a child not to press that big red button. Anyway, you can use JavaScript to validate the image size, and if it's beyond the boundaries, just create something like a popup saying "your image is too big...". Here is little a snippet that will give you the idea:


function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}

Or you can take this further by resizing the image now that you have it preloaded. The main idea is that you have object Image(), which has various properties that you can get/set.

Mike

Beauford
Jun 30th, 2009, 12:44 AM
.imageResize{
width:450px;
max-width:450px;
}

This is what I have now and it doesn't work. If the picture is bigger than 450, it stretches the table messing everything up.

The picture gets resized, but it seems the <TD> still allocates the space for the larger size.

Here is my code:

Thanks



$patterns=str_replace("","<img style='max-width: ".$size."px' src='",$patterns);
$patterns=str_replace("","'>",$patterns);

<table cellspacing='0' width='100%' border='0'>
<tr valign='top'>
<td width='200px' class='gmailleft'>
<table cellspacing='0' style='width: 200px' border='0'>
<tr>
<td align='center'><p class='p'>".$r['gangPREF']."<a href='viewuser.php?u={$r['userid']}' {$csscode[$r['userlevel']-1]}> {$r['username']}</a>&nbsp;[{$r['userid']}]&nbsp;{$RM}</td>
</tr><tr>
<td align='center'>$av</td>
</tr>
</table>
</td>
<td width='440px' class='gmailright'>
<table cellspacing='0' style='width: 450px' border='0'>
<tr>
<td style='width: 450px'>";
echo $parser = bbc2html($r['gmMESSAGE'], 450);
echo "
</td>
</tr>
</table>
</td>
</tr>
</table>";