如何调整 <div>适合里面的图像? [英] How to size <div> to fit the image inside?

问题描述

我有一个这样的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{高度:6em；}

所以图片根据其纵横比调整大小，比如它有尺寸(6em，Yem).我希望.game_img_div"也具有尺寸(6em，Yem).

我该怎么做?谢谢！

解决方案

改变容器div的显示类型:

.game_img_div {显示:内联块；/* `display: table` 也可以使用 */}

http://jsfiddle.net/S8GK4/

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 !

解决方案

Change the display type of the container div:

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

http://jsfiddle.net/S8GK4/

这篇关于如何调整 <div>适合里面的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！