August 12, 2005

Wide Images in CSS Layouts


Here's a little piece I've written discussing a technique for including wide images inside fluid CSS layouts.

At the heart of the issue is the effect of images that become too wide to fit inside their containing element when the user's browser window is sized too small.

The trick is to simply apply the image as a background image to a DIV element. The DIV will take up whatever width is available and the background image will be cropped to fit whatever space is available.

I kind of lost my energy towards the end of writing this. I'm by no means a professional writer (surely by now you've found more than a few grammatical and spelling errors in the things I've written) and I never proof-read enough. I'm more stream-of-consciousness when I write and that leads to some crazy mistakes. But I also like that approach. Sometimes I'll talk myself into a solution or new idea while typing up these write-ups on CSS-related topics. So it's great for me because it's not just writing, it's something of an exploration. But you guys just get stuck with my crappy writing, spelling and grammar. Those of you who do not have English as your primary language must have an especially difficult time.

Oh well. No worries.

Posted by Ruthsarian at 03:08 PM | Comments (3)

Comments

I've done similar things. I have a website where a big background image (actually a div inb the back) resizes itself to always fit in the page: http://www.strangetales.net/ and I use the TD background image trick to show a scrolling panorama at http://www.strangetales.net/pan.html Don't know much about css standards, though. I just keep hacking at it until it works in firefox and IE. The panorama doesn't work in opera, but that has to do with the events not sticking to two functions correctly at the same time. I prefer to think that it is an opera shortcoming rather than my own problem. Old netscape, opera, konquerer, and webtv browsers are all hovering at 1% or less of my hits and I have abandoned trying to support them. Posted by: Keith Graham at August 16, 2005 11:45 AM
I had the same problem but with a table that was too wide to fit in contentColum. The layout was breaking very badly on IE and unacceptable on FF. The solution I found is explained in detail on my blog: http://www.isarie.com/index.php?p=42 Hope this helps. Thank you for your work! Posted by: Stefan Isarie at September 10, 2005 11:16 AM
I had the same problem but with a table that was too wide to fit in contentColum. The layout was breaking very badly on IE and unacceptable on FF. The solution I found is explained in detail on my blog: http://www.isarie.com/index.php?p=42 Hope this helps. Thank you for your work! Posted by: Stefan Isarie at September 11, 2005 01:22 AM

Post a comment










Code:
Type Code:

Remember personal info?