Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 03-29-2006, 08:24 PM
  #1
Yamamaya
Aspirant (Level 2)
 
Join Date: Jan 2006
Location: California
Posts: 14
iTrader: (0)
Yamamaya is an unknown quantity at this point
Image: Scale to fit

I know how to change the sizes of an image and such, but how do I make it so an image is set to scale itself to fit inside a table cell?

Thanks in advance
Yamamaya is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 03-30-2006, 06:24 AM
  #2
welshsteve
Super Deity (Level 18)
 
welshsteve's Avatar
 
Join Date: Oct 2005
Location: Leamington Spa, UK
Posts: 2,513
iTrader: (0)
welshsteve is on a distinguished road
Try this.
Code:
<table>
     <tr>
          <td style="width:400px;height:20px;">
               <img src="image.gif" style="width:100%;height:100%;" />
          </td>
     </tr>
</table>
__________________
WelshSteve
welshsteve is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 03-30-2006, 07:30 AM
  #3
Bill Posters
Catapulted
 
Join Date: May 2003
Posts: 610
iTrader: (0)
Bill Posters is on a distinguished road
Quote:
Originally Posted by welshsteve
Try this.
Code:
…
<img src="image.gif" style="width:100%;height:100%;" />
…
Fwiw, …
Code:
…
<img src="image.gif" width="100%" height="100%" alt="…" />
…
…will work equally well - if you want to fill the space completely (which could possibly emtail distorting the image).
However, I think the OP wanted the image to 'scale', which I take to mean scales up or down in ratio, so that it fits neatly within the available space.

This is likely to require javascript to perform a little maths on one or both dimension attributes.
A possible solution is discussed here.


However…
If the images all share the same aspect ration (e.g. width>height or height<width), then you can actually do the job by declaring only the longer dimension.

e.g.

If the images are all 'landscape' ratio (width>height_…
Code:
<img src="…" width="100% alt="…" />
If the images are all 'portrait' ratio (height>width)…
Code:
<img src="…" height="100% alt="…" />
The undeclared dimension should scale up/down accordingly to maintain the image's correct ratio.
Bill Posters is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 03-30-2006, 08:04 AM
  #4
welshsteve
Super Deity (Level 18)
 
welshsteve's Avatar
 
Join Date: Oct 2005
Location: Leamington Spa, UK
Posts: 2,513
iTrader: (0)
welshsteve is on a distinguished road
Sorry. I missed out the alt attribute. Did it in a rush
__________________
WelshSteve
welshsteve is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 07:01 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.