SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2000
    Location
    Grosseto, Italy
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making image height 100% of the table height

    hi,
    how can I make the height of an image resize to fit the height of the table cell?

    I tried
    <td><img src="image.gif" width="10" height="100%"></td>

    it doesn't seem to work tough. I don't know why.

    thanks

  2. #2
    SitePoint Enthusiast Morris Cornet's Avatar
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: making image height 100% of the table height

    Hi

    height=100% is not allowed for use with images. You can only set the height of images in an absolute manner: i.e. height="600"
    The only solution I can think of someway getting the height of all images on one table row, and then resizing all images to the height of the image of greatest height.

    This appears to be possible in ASP. Maybe this one (altough used in another way than you need it) will get you started:
    http://www.4guysfromrolla.com/webtech/050300-1.shtml

    It also looks like there are applications and scripts for this. Take a look at http://cgi.resourceindex.com or so.

    I may be skipping the simplest of solutions. I am in doubt, for example, if this could be done with simple JavaScript. Maybe someone else knows.

    Morris Cornet

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It's not really a good idea to tell the one image to be stretched percentage and fixed by numeric absolute.

    However, it would be possible to get a similar effect assuming your <td> was given an absolute height because the 100% would be only 100% of the given <td> height.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2000
    Location
    Grosseto, Italy
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    However, it would be possible to get a similar effect assuming your <td> was given an absolute height because the 100% would be only 100% of the given <td> height.
    it's quite impossible for me, or at least very hard, to give an absolute value to the <td> height property since the content within the cell is dinamically generated with ASP and showing user inputs in the form of text, images and also html.


    The only solution I can think of someway getting the height of all images on one table row, and then resizing all images to the height of the image of greatest height.
    If I understand what you mean, this would be uneuseful if the the content determining the height of the cell is text. Is that correct? Unfortunatly that is my case. I am anyway reading the article at 4guysfromrolla since it seems interesting.

    I too think that maybe javascript could do the trick. Maybe using a function to get the current height of the cell and applying that height to the image height.
    Will try to get something out of this...

  5. #5
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To do that you have to specify the height in <td> as well
    PHP Code:
    <table width=50 height=500>
      <
    tr>
        <
    td width=50 height=500><img src="image.gif" width=50 height="100%"></td>
      </
    tr>
    </
    table
    - the lid is off the maple syrup again!

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2000
    Location
    Grosseto, Italy
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah that's true. I just tried out using even 0 as the height of the <td>. The cell exapands when it's filled with content and therefore the image with a 100% height fills all the cell height.

    thanks all for the help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •