Hey there! Sign in to join this conversationNew here? Join for free
x Turn on thread page Beta

Controlling size of a large images watch

Announcements
    • Thread Starter
    Offline

    0
    ReputationRep:
    I have a large image, bigger than the width of my screen, that I want to display in a table. However, I want the image to be restricted so that it automatically adjusts to the width of the containing table. E.g. code:

    <html>
    <body>
    <table width=90% border=3><tr><td><img src="test.png" border=1></td></tr></table>
    </body></html>

    test.png is actually about 2000px wide....how can I control it so that it stays within the size of the browser window? (i.e. within the 90% width speicified for the table)
    Offline

    14
    ReputationRep:
    <img src="image.gif" width="100%" height="100%" alt="…" />

    Note that this might result in the image being distorted.
    • Thread Starter
    Offline

    0
    ReputationRep:
    it didn't work. Image still way too wide (This is internet explorer btw - i need it working in IE...firefox autosizes it beasutifully, but I need IE doing it)
    Offline

    0
    ReputationRep:
    <img src="image.gif" width="1000" height="500" alt="image" />

    Just fiddle around with the 1000 and 500 values until you get something that fits.
    • Thread Starter
    Offline

    0
    ReputationRep:
    (Original post by Melchett)
    <img src="image.gif" width="1000" height="500" alt="image" />

    Just fiddle around with the 1000 and 500 values until you get something that fits.
    this is not what i'm after i'm afraid, i really do need it to be in relative (%) terms, since the image needs to size according to the resolution of the screen.

    Before we get any additional suggestions, I should point out that I'm not an HTML newbie, I am an experienced programmer - and this problem doesn't seem to be solveable using just simple html. I am looking for something perhaps involved CSS - if all else fails I can do something with javascript, but it would be messy and I'd rather avoid it.
    • Thread Starter
    Offline

    0
    ReputationRep:
    i tried that earlier and it didnt work - it made the image it's full width and spilled the table size over the edge of the screen
    • Thread Starter
    Offline

    0
    ReputationRep:
    the ellusive trick is what i have been searching for all day! thanks for a bit of progress though, I'll see where I can go from that!
    Offline

    1
    ReputationRep:
    Does your image need to be dynamically resized? Could you not just resize the image to a suitable size in a paint package and have done with it?
    • Thread Starter
    Offline

    0
    ReputationRep:
    The issue was that I wanted the image to be as big as possible for whatever resolution that was being used.

    However, I have FINALLY found the solution, and I thought it would be nice to share it with everyone. The solution is to add:

    style="table-layout:fixed"

    to the containing table, which forces the table to behave!

    thanks for the help guys.
 
 
 
Poll
Do I go to The Streets tomorrow night?
Useful resources

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Write a reply...
Reply
Hide
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.