Stretchy Images

(This article was originally at 4-ever.org)

If you widen or narrow your browser window you will notice that the image below stretches to fill the space. OK, so you won't! That is because 01010 has fixed width columns whereas 4-ever.org has a fluid centre column. But please hang with me a bit longer...

Click a large style setting and you will see the image stretch and that is because of the same principle. So the bit of code below still applies in exactly the same way. Making stretchy images is very simple:

In the XHTML put something like this: <img src="pic.png" width="144px" height="55px" alt="" style="width: 100%;" />

Putting the style statement after the width overrides it (and validates :-) So the fluid 100% overrides the fixed 144px.

MORE IN THIS SECTION

• Countdown Timer
• CSS Resizable Underlines
• CSS Text Fx
• Expanding Images
• PHP Style Switcher
• Simple CSS Headings
• Stretchy Images