如何调整<div>的大小以适应图像？</div>

Question

我有这样一个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-->

且.CSS仅包含

img.gamethumb
{
height:6em;
}

因此图片根据其宽高比调整大小，比如它有尺寸（6em，Yem）。 我希望“.game_img_div”也有尺寸（6em，Yem）。

我该怎么办？谢谢！

Answer 1

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

Answer 2

更改容器div的显示类型：

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

http://jsfiddle.net/S8GK4/

Answer 3

这样就可以了。

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

http://jsfiddle.net/95ZUw/

Answer 4

尝试使用css：

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

和img标记没有</ img>