Auto-size an image using css

[gift2women]

Here is what I am trying to do... I have a database with multiple entries. Each entry contains a link to an image from another website. Each image varies in size. I would like to display the images on my website (keeping the aspect ratio). The area on my website to display the images, for example, is 100x by 100y. I would like to view 100% of my image (no overflow).

I would like something that makes the image display as 100x width and auto-height if the width > height; and display as 100y height and auto-width if the height > width.

Since I am not hosting the images, I can't do an if/else statement in my code, and figure that CSS may be my best hope. (I have found how to do close to what I want:
<style>
#image_container
{
width:10em;
height:10em;
border:3px double #999;
}

#image_container img
{
width:100%;
height:auto;
}
</style>

The issue being that if the image is taller than it is wide, the image overflows. If there is another way to look at this, I'm open to suggestions.

[Fang]

Requires JavaScript to determine the height/width ratio, then set the height or width to 100% accordingly.

[MrLeN]

well, you could do a couple of things.

Firstly, you could simply float the container to the left.


#image_container
{
float: left;
width:10em;
border:3px double #999;
}



..but you'd have to take the height out.

Or, you could use a css overflow (while keeping the height):



#image_container
{
width:10em;
height:10em;
border:3px double #999;
overflow: auto;
}



That will make a little scrollbar appear, which doesn't exactly look pretty -- but at least all the squares will be in line.

Alternatively, you could also display a width and height (by pixel) for the image itself. It might squish the images a little, but at least there wont be a scrollbar.


#image_container img
{
width:100px;
height:100px;
}

[gift2women]

I suppose I should move this to a javascript forum to ask this, but anyone have a sample javascript code that could do what I initially requested?