View Full Version : Resizing images to reflect the size of tabs in a fluid layout

04-09-2011, 08:07 PM
I have five tabs at the top of my website: one for the main site, one for a blog, one for a Twitter feed, one for a Facebook page, and one for a YouTube profile.

I am trying to make these tabs display images, and these images should resize when the tab is narrower than the image, but stay the original size when the tab is wider, so as to avoid the tabs protruding from the tabs.

I wrote a JavaScript (that doesn't work), and set the image widths to 100% of the container width as a fallback. Since the JavaScript doesn't work, it goes to the fallback, but some of the images stick out from the bottom of the tabs, as the height of the image at the tab's width is greater than the tab's height.

The code is too complex to post here, but you can see the problem live: http://wooftalk.net/fmnas

If anyone has any ideas how to make that JavaScript work, that would be great! :)

04-15-2011, 11:21 PM