www.webdeveloper.com
Results 1 to 9 of 9

Thread: vertically stretching images to fit expanded tables

  1. #1
    Join Date
    Sep 2003
    Location
    in my head
    Posts
    25

    vertically stretching images to fit expanded tables

    Hey, this may seem REALLY simple, but I've just never needed to do it before - thought i knew how to do it but don't.

    My page is designed so that images form the left, top and right of the page, with a table element (or something appropriate that can take text without using layers and the like) right in the middle.

    Obviously i want this text-filled element to expand downwards as necessary when it fills with text - this is the default so no problem. But the images to the left and right of the text-filled bit need to stretch to the bottom of the page regardless of how long the text-filled table element. I thought i could do it using ="%" values for the table and image sizes, but this never seems to work... any ideas?

    Cheers

    p.s. Or just thinking, is there an alternative to this using background images that won't move and resize in different browsers and resolutions (without using too much javascript?)
    I'm wearing cool trousers


  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    try setting up the fixed size for table width,image width
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Sep 2003
    Location
    in my head
    Posts
    25
    ????

    didn't follow that at all...

    i'm trying to create the page so that it specifically isn't fixed in any way.

    the images have a minimum size - i.e. their default size... but the images are just patterns that should continue to the bottom of the page if the text extends the borderign table element past their natural length...hence the stretch question. If i start setting specific sizes then it's going to go horribly wrong as each browser will read it differently, and also it's far more manual labour to set it up for each page.



    in fact I've just had another thought - if your screen is big enough i actually want the images to stretch to fill the screen anyway.

    anyway, here's a link to the beginnings of the page and if anyone has any ideas how to stretch images left and right of the text that'd be great. cheers.

    Link to Page
    I'm wearing cool trousers


  4. #4
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    well you can try this link,it sets the image size according to the page,you can probably incorporate it in your situation(remind you that it will increase your dependency on JavaScript)
    The link increases reduces width+height of the image wher eas you can only use to increase the height.

    http://webapplikations.com/pages/htm...eOnResize.html
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  5. #5
    Join Date
    Apr 2003
    Posts
    853
    If i start setting specific sizes then it's going to go horribly wrong as each browser will read it differently, and also it's far more manual labour to set it up for each page.
    No...an image that is, say, 100 x 70 pixels is just that no matter what..the problem arises that everyone will have different monitor resolutions like 800 x 600 or 1024 x 768 or even the prehistoric 600 x 480...so in a sense you are correct that it may look differently on various screens.

    This is why it is important to keep the resolutions of your images at 75dpi or less so it doesn't take too long to load.

    If you put an image on the screen you can click on it and manually resize it but then it will look distorted and bad.

    What I do sometimes is I have Fireworks or Photoshop open at the same time and if I need to use the same image but at different sizes then I can alter the image in Photoshop and save it as a slightly different name.

    If you just "stretch" your images manually they will look all pixelated and will make your page look really bad.
    Humankind cannot gain anything without first giving something in return.
    To obtain, something of equal value must be lost.
    That is Alchemy's first law of Equivalent Exchange.
    In those days we really believed that to be the worlds one, and only truth.
    - FullMetal Alchemist

  6. #6
    Join Date
    Sep 2003
    Location
    in my head
    Posts
    25
    hmm, good point with the browser thing - i was getting myself muddled with pts - which Mozilla at least definitely reads differently for some reason - i have asite with layers and the thing alwasy loads too low in Mozilla! very annoying.

    with respect to the Javascript one: here's an idea - but am i being too complicated?

    - get the size of the screen
    -determine the size of the page once the text has been taken into account (don't know how to do that!)
    - do some simple calculations by taking these values and subtractign the unchanging values from the rest of my images...
    -set the totalheight-known height to that of my stretchable image...which then should fill the rest of the page...

    would that work? Although, as i say i don't know how to get the size of a page when the text increases it automatically.
    I'm wearing cool trousers


  7. #7
    Join Date
    Mar 2003
    Location
    Escondido, CA
    Posts
    998

    Don't stretch your image!

    Open your image in your graphics editor, then increase the size to 200%. See how much you like it. That's what is going to happen to it when it stretches.

    Better to take the other tack. Create a large image, & do whatever it takes to make it reduce when needed.

    Just my 2cts.

  8. #8
    Join Date
    Sep 2003
    Location
    in my head
    Posts
    25
    ok ... the image itself is a simple gif with about 3 vertical lines (so it's not going to look stupid when sized up) -- but still ... what would the code be to make sure that the image always resized (down or up as appropriate) to fill the space and not leave any background white peeping through?
    I'm wearing cool trousers


  9. #9
    also he could be stretching it smaller and already has a big picture

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles