SRL Archive - Web Development

HTML/CSS Image Scale


Neehosoft

2009-11-14 20:39:56

Okay, I got my template almost finished, but im working on something and need some help.
The template automatically scales itself according to the screen resolution (credits for this to code841) but now i have a image that is suppose to scale all the way across the little post table/thing.
Like go to neehosoft.com, you see where the posts are?
I want a image to scale all the way (width) of it, but without having a set value because it changes for all screes res. please help,
NeehoSoft.

The_Scripts

2009-11-14 23:01:53

Just a few things I would like to make sure I understand…
1) Do you want the image to stretch only horizontally, or do
you want it to scale properly?
2) Is javascript an option, or would you prefer to stay away
from it?
3) I'm assuming its the logo that you want to be stretched?

Edit:
I have been playing around in Dreamweaver, and it seems all
you really need to do is set the pictures width to 100%.
This will cause cause the picture to expand while the
"container" expands.

I have not tested it out in any browser other then IE 8.

I have attached the files I was playing around with,
hopefully it helps you out a bit.

If you still need help, just post a reply and I will "grab" a
copy of your homepage and play around with the HTML until
I get something that works.

MasterKill

2009-11-15 02:56:06

just put <img src="http://www." alt="" width="100%" />

The 100% will make the image as width as it can be in the div it's in.

Though it's an ugly solution imo. You could better just use a centered image and give the div it's in the same background color.

For example:


<!-- this in your head -->
<style type="text/css">
#header{
background: #000000;
text-align: center;
}
</style><!-- ect -->

<!-- this in your body where te banner should be -->
<div id="header">
<img src="images/banner.gif" alt="website banner" />
</div>