Image Width in Div

[thesmart1]

I have a 300px x 300px wrapper div with an image inside it. I want the image to fit inside the div, centered, at its original size or resized to fit if one dimension is larger than 300px. The image could be any size (it's uploaded by users), so I can't make it a fixed width. Right now, large images just overflow out of the div. I could fix this with max-width and max-height, but I'd still have this issue in IE6. Is there any other way to do this?

Example:
http://www.beta.takoyaki-chan.com/shows/test
Click the third image (the flames one) in the carousel. Right now it just overflows the div. And I know the whole page is shifted down in IE6, I have to find the cause of that too (probably a floating/clearing issue with the sidebar).

[lokeshshettyk]

Try the following, may be of help :)

1) http://www.codingforums.com/showthread.php?t=96872

Optional -
2) http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm

Cheers :)

[thesmart1]

So the expressions in CSS are basically inline JS... I had thought of using JS to resize it for IE6, but I hate making something so simple and large (a preview image that could break the page layout) rely on JS (which may be disabled on run slowly after a page load). getimagesize() in PHP is a great idea though, didn't think of that... (even after using it for thumbnails lol). Thanks for the link :)