Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts

    image sizing on different screen sizes

    Hello,

    On my website I have an image which I want to put inside a table. However the image is larger than the table and expands the table to continue off the screen.

    http://alexwilliams57.powweb.com/trip2/frametest.html

    How can I have the table at 100% of the page width and have an image which fills the table without ruining the image's aspect ratio?? Ultimately I would like the image and table to adjust in sze according to the size of the browser window. thanks

    my code so far is:

    Code:
    <table border=1 cellpadding=0 cellspacing=0 bgcolor="#F0F8FF" height=55% width=100% valign=top>
    
    <tr><td colspan=8 valign=bottom align=left><a href="frametest.html" target="_parent">
    <IMG SRC="title.gif" BORDER=0 ALT="" scale="50"></a>
    </td></tr>
    
    
    </table>

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Try switching to a full CSS layout.

    You could set the image with a width and height property (though you have to be sure you're keeping the aspect ratio); denying it to be larger than the table.

    You could also opt set the image as a background to the table, but not have it repeat-y.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Firsts things first, DO NOT use tables for page layout. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?". I would use a div or an h1 tag for this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    #title {
    height:55%;
    overflow:hidden;
    background:#F0F8FF;
    border:1px solid #000;
    }
    </style>
    </head>
    
    <body>
    <div id="title"><a href="frametest.html" target="_parent"><img src="title.gif" border="0" alt="" height="50%"></a></div>
    </body>
    </html>
    Ugh I just looked at the rest of your code. You used framesets out to wazoo. Framesets are also frowned upon.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I have semi solved the problem. I used frames so that I could target them to reload when hyperlinks are clicked. I didnt know however the same effect could be achieved using div tags. A link to some basics of this would be very useful. Graphics and image resizing based on resolution and screen sizes are a headache. Although i have achieved what I wanted to do in firefox (yet to be tested in IE 7) the graphics still appear slightly warped at some screen sizes grrr. How do the pros do it

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Do you have an example of a site that does what you are trying to achieve? The image is going to get warped if you try to make it larger than its original size.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I thought this was quite a normal issue. It is just a graphic i created in photoshop i put into a table for a title on my webpage. BUt as the some screens are smaller my frameset (yeah i no they are frowned upon) reduce in size as they are defined in size by percentages but the graphic stays the same size (huge in comparison). The effect i want can be seen in firefox so if you test it in firefox using the link below you can see what i want.

    http://alexwilliams57.powweb.com/trip2/frametest.html

    however in IE7 it looks totally different when the same link is followed. If you can think of a better way of doing it that works in both browsers im listening

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I would do something like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    #title {
    background:#013372;
    border:1px solid #000;
    min-width:743px;
    }
    #title a {
    display:block;
    height:56px;
    }
    #title a img {
    border:0;
    }
    #title a img.titleleft {
    float:left;
    }
    #title a img.titleright {
    float:right;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #title {
    width:expression( documentElement.clientWidth < 743 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 743 ? "743px" : "auto") : "743px") : "auto" );
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div id="title"><a href="frametest.html" target="_parent"><img class="titleleft" src="titleleft.gif" width="424" height="56" alt=""><img class="titleright" src="titleright.gif" width="317" height="56" alt=""></a></div>
    </body>
    </html>
    Image files attached...
    Attached Thumbnails Attached Thumbnails image sizing on different screen sizes-titleleft.gif   image sizing on different screen sizes-titleright.gif  
    Last edited by _Aerospace_Eng_; 07-31-2007 at 12:21 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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