How to size to fit the image inside?

Question

I have such a div:

<div class="game_img_div">
<a href="./play.php?game=free-kick-fusion">
<img class="gamethumb" src= " ./images/thumbs/free-kick-fusion.jpg">
</img>
</a>
</div><!--game_img_div-->

and the .CSS only contains

img.gamethumb
{
height:6em;
}

So the picture resizes according to its aspect ratio, say it has dimensions (6em,Yem). I want the ".game_img_div" to also have the dimensions (6em,Yem).

How can I do it? Thanks !

Answer 1

try for css:

div.game_img_div {width:auto; display:block; position:relative}
img.gamethumb {height: 6em; max-width:100%;}

and the img tag it's without </ img>

Answer 2

Change the display type of the container div:

.game_img_div {
    display: inline-block; /* `display: table` also works */
}

http://jsfiddle.net/S8GK4/

Answer 3

img.gamethumb {
    height:6em;
}
div.game_img_div {
    float:left;
}

Answer 4

This will do the trick.

.game_img_div { float:left; }
img.gamethumb { float:left; }

http://jsfiddle.net/95ZUw/