autoresize image as per table size?

  • pclovers
  • Graduate
  • Graduate
  • User avatar
  • Posts: 155
  • Loc: Nagpur, India

Post 3+ Months Ago

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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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 :)
  • Dragonkai
  • Student
  • Student
  • Dragonkai
  • Posts: 76

Post 3+ Months Ago

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

You can try using % properties for the img size itself.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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
  • argrafic
  • Beginner
  • Beginner
  • argrafic
  • Posts: 53

Post 3+ Months Ago

images can resize themselves?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

argrafic wrote:
images can resize themselves?
If you put the correct code than yes, it will...
  • argrafic
  • Beginner
  • Beginner
  • argrafic
  • Posts: 53

Post 3+ Months Ago

with JavaScripts?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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.
  • argrafic
  • Beginner
  • Beginner
  • argrafic
  • Posts: 53

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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%"
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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>
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

Will not show or does not resize?

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

Maybe IE doesn't like percentages...
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

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
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

Yeah no problem lzr... Hope you found some alternative or a better or near better option :)
  • hukaluka
  • Born
  • Born
  • hukaluka
  • Posts: 1

Post 3+ Months Ago

Hi all, I just did this on my site.

1. Decide table width (i.e. 100%)
2. Decide cell width (i.e. 2 equal cells would have a width of 50% each)
3. When you insert a pic, make the width 100% - ***make sure you leave the pic proportional (there is a checkmark next to the width/height of the photo)

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 111 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.