PDA

View Full Version : Auto Resize


Soad
09-20-2006, 01:55 PM
I am trying to put a picture into a table which I have set at 100% with 1 row and 1 column, the original size of the picture size is 1772 x 1181 JPEG, I have resized this to 1329 x 886 and inserted in the table set at 100% , when I view in the browsers on my PC with resolution at 1280 x 1024 it looks OK and it more or less fills the screen but when I view on a colleagues PC with a resolution of 1024 x 768 it is only showing part of the picture and looks silly.

I think I am a bit confused on the 100% table as I thought that what ever image you put in side it would auto resize to fit the various different resolutions and always fill the screen

Any information very much appreciated

domedia
09-20-2006, 03:47 PM
Your image is 1329 wide no matter what resolution. The table tag surrounding your image will not change the image size.

Soad
09-20-2006, 03:57 PM
Thanks for the reply

How could I do this any ideas, should I make the picture a lot smaller ?

kona72
09-20-2006, 06:08 PM
You can try CSS....

Here is a sample i have been toying with...

This is the css file.. save it as style.css or whatever you like.

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
color: #000000;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#background{position:absolute; z-index:1; width:100%; height:100%;}

Here is the page utilizing the css...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="../cssfiles/snl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
bkgrd.jpg
</div>

</body>
</html>

This will ensure that the background image is ALWAYS 100% of the page....

Creative Insanity
09-20-2006, 06:38 PM
It is not the body you want at 100% it is the wrapper.

domedia
09-20-2006, 07:57 PM
Either way, the *image* itself is not going to change size based on the width of the element it's a background image to.

edbr
09-21-2006, 01:31 AM
I had a link , which I lost when my c drive got ate that showed how images can be scaled using css. I never tried it though.
anyone know about this? i will google, or is it trademark these days and see if i can find it again

Creative Insanity
09-21-2006, 03:28 AM
1329 x 886
That is your problem setting a table at 100% will not effect the image at all since the images size is larger than 1024 then you are going to get sidebars and you will have to either put in an actual size for the audiance you are targeting.. like width set to 900px for a 1024 screen size. But remember when you do resize like this in a tag the image is going to get pixel distortion and not look as you want.
Also remember that setting the width to 100% is the same as the actual image size since 100% is just that.

Soad
09-21-2006, 04:36 AM
Thanks for the reply’s, I really must learn more on css, sorry to sound daft but am I using the code right, I created a new css page pasted in the code saved as a ccs file then created a new html file pasted in the code for that put my image in attched the css file saved and previewed in the browser but its still the same, am I doing something wrong, thanks again for all you help guys

Creative Insanity
09-21-2006, 06:47 AM
I really don't think (by the way you have used it) you understand the workings of Z axis so I hunted out some info for you to read up on here (http://www.blooberry.com/indexdot/css/properties/position/zindex.htm).

domedia
09-21-2006, 12:35 PM
I had a link , which I lost when my c drive got ate that showed how images can be scaled using css. Images can be, no problem there.
Background Images however, does not resize.