Personal Note: CSS Fluid Image Layout
Brilliant article on fluid image layout by Ethan. The technique allows for images to resize as the window resizes. Similar fluid techniques have been around for content layout but nothing for images. Most solutions required maintenance by the author to resize posted images to fit the column/row width/height restrictions of their website. This was restrictive for both readers and authors where as a fluid image layout would help large images look good at high as well as low resolution.
img {
max-width: 100%;
}
sample:
<img src="image-x.jpg" style="max-width: 100%;" />
The first step is taken by using the css property max-width. Setting it to 100% allows the image to resize with the browser in standards compliant browsers (i.e. not IE). See Ethan’s test case for fluid images here.
I’ve been meaning to clean up and do a fluid style design for my blog for a while now. This in combination with Ethan’s other fluid grid design article over at a list apart might be enough to get me started.
Thx, source by: jesse.bilsten.net