Back To Programming / Scripting / Coding Forum

autoresize image as per table size?

  • pclovers
  • Graduate
  • Graduate
  • User avatar
  • Joined: May 21, 2005
  • Posts: 154
  • Loc: Nagpur, India
  • Status: Offline

Post May 19th, 2008, 10:00 pm

I have table with fixed % of Page. I want that image inside it should occupy whole table but it should resize itself as per size of table no matter what it's resolution.
I have image with higher resolution and it enlarge the table. I want it to adjust itself as per table.
Get Free Traffic | Free Facebook Fans
The Gamers Worlds
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 19th, 2008, 10:00 pm

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 19th, 2008, 10:13 pm

If the table is fixed size and doesn't change, than you can try the following...

The HTML
HTML Code: [ Select ]
<table>
<tr>
 <td class="timg">
 <img src="file.jpg" />
 </td>
</tr>
</table>
  1. <table>
  2. <tr>
  3.  <td class="timg">
  4.  <img src="file.jpg" />
  5.  </td>
  6. </tr>
  7. </table>
The CSS
CSS Code: [ Select ]
.timg img {
 height: 200px;
 width: 200px;
}
 
.timg{
 height: 200px;
 width: 200px;
}
  1. .timg img {
  2.  height: 200px;
  3.  width: 200px;
  4. }
  5.  
  6. .timg{
  7.  height: 200px;
  8.  width: 200px;
  9. }
If not, you can try percentages (100%) for .timg img{...} class... see if this helps :)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Dragonkai
  • Student
  • Student
  • No Avatar
  • Joined: May 10, 2007
  • Posts: 76
  • Status: Offline

Post May 20th, 2008, 10:12 pm

Yes, but that doesn't resize it does it?

You can try using % properties for the img size itself.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 21st, 2008, 12:49 pm

Dragonkai wrote:
Yes, but that doesn't resize it does it?

You can try using % properties for the img size itself.

He said the table was fixed... read his post
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • argrafic
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Dec 14, 2007
  • Posts: 53
  • Status: Offline

Post May 21st, 2008, 1:23 pm

images can resize themselves?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 21st, 2008, 1:27 pm

argrafic wrote:
images can resize themselves?
If you put the correct code than yes, it will...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • argrafic
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Dec 14, 2007
  • Posts: 53
  • Status: Offline

Post May 21st, 2008, 1:29 pm

with JavaScripts?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 21st, 2008, 1:34 pm

argrafic wrote:
with JavaScripts?

Not necessarily... You can put CSS...

Let's say for example an image you want to upload to a site is 200x200 pixels but you want it to be 500x500 so what do you do? You either photoshop it (well, manipulate it using a program) or you can put in the following attributes to it:
HTML Code: [ Select ]
<img src="img.png" style="width: 500px; height: 500px;" />
This code would make the image resize to be 500x500... the way I gave in my first post here is external CSS... the way I gave you here is the same thing... except the CSS is inline.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • argrafic
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Dec 14, 2007
  • Posts: 53
  • Status: Offline

Post May 22nd, 2008, 9:12 am

oh, yes, i know that part.

my question was more of resizing the image the way a table with 100% with and height does it, by itself and not manually.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 22nd, 2008, 9:46 am

argrafic wrote:
oh, yes, i know that part.

my question was more of resizing the image the way a table with 100% with and height does it, by itself and not manually.

Oh yeah, you can do it that way... ozzu does it that way... resize the browser on this page. All it is is width="100%" height="100%"
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • lzr
  • Novice
  • Novice
  • No Avatar
  • Joined: May 09, 2008
  • Posts: 28
  • Status: Offline

Post May 30th, 2008, 8:00 am

Bogey wrote:
argrafic wrote:
...
my question was more of resizing the image the way a table with 100% with and height does it, by itself and not manually.

Oh yeah, you can do it that way... ozzu does it that way... resize the browser on this page. All it is is width="100%" height="100%"


Hi, Bogey,
When I trying to autosize image in percentages, for whatever reason IE6 and IE7 will not display the image at all. IE will display my image only when it is sized in px. Percentages do work in Firefox though. The code I am using is:
Code: [ Select ]
<td colspan="1" rowspan="6" style="text-align: center; vertical-align: top; width: 25px;"><img src="vertline.gif" style="width: 10%; height: 100%;">
</td>
  1. <td colspan="1" rowspan="6" style="text-align: center; vertical-align: top; width: 25px;"><img src="vertline.gif" style="width: 10%; height: 100%;">
  2. </td>

(I have variable cell height determined by text in other cells, and I am trying to resize the image which is basically a vertical line meant to be a divider to match the height of this column). Does IE not support image size in percentages, or I did not do it right?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 30th, 2008, 12:16 pm

Try this...

The CSS
CSS Code: [ Select ]
.tbcell {
 text-align: center;
 vertical-align: top;
 width: 25px;
}
 
.tbcell img {
 width: 10%;
 height: 100%;
}
  1. .tbcell {
  2.  text-align: center;
  3.  vertical-align: top;
  4.  width: 25px;
  5. }
  6.  
  7. .tbcell img {
  8.  width: 10%;
  9.  height: 100%;
  10. }

And the table cell would look like...
HTML Code: [ Select ]
<td colspan="1" rowspan="6" class="tbcell" ><img src="vertline.gif" />
</td>
  1. <td colspan="1" rowspan="6" class="tbcell" ><img src="vertline.gif" />
  2. </td>
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • lzr
  • Novice
  • Novice
  • No Avatar
  • Joined: May 09, 2008
  • Posts: 28
  • Status: Offline

Post May 30th, 2008, 2:16 pm

Bogey,
Thanks for the suggestion. I've tried it and it does work with Firefox, but the image still will not show in IE.
Lzr
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 31st, 2008, 11:08 am

Will not show or does not resize?

For either way, I don't know what to do...

Maybe IE doesn't like percentages...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • lzr
  • Novice
  • Novice
  • No Avatar
  • Joined: May 09, 2008
  • Posts: 28
  • Status: Offline

Post June 2nd, 2008, 1:30 pm

Bogey wrote:
Will not show or does not resize?
For either way, I don't know what to do...
Maybe IE doesn't like percentages...


IE will not display the image at all. Yes, apparenly it does not like percentages in td cells. It does allow image size in percentage of entire page though. Thanks any way, Bogey.
Lzr
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 2nd, 2008, 1:30 pm

1, 2

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: Kurthead+1, Zealous and 135 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.