...

View Full Version : image sizing on different screen sizes



alex57
07-30-2007, 11:45 PM
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:


<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>

BWiz
07-31-2007, 12:07 AM
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.

_Aerospace_Eng_
07-31-2007, 12:39 AM
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

<!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.

alex57
07-31-2007, 01:29 AM
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

_Aerospace_Eng_
07-31-2007, 01:33 AM
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.

alex57
07-31-2007, 01:42 AM
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 :)

_Aerospace_Eng_
07-31-2007, 01:15 PM
I would do something like this

<!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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum