div中图像的约束维度

Question

我有一个div（200x200平方）里面，我想在顶部放置一个180x60的图像，然后放一些文字。

<div class='box_item'>
    <img src="<? echo base_url(); ?>img2/avengers_assemble_small.jpg" class='box_item_img'/>
    <h4>some text...</h4>
</div>

CSS是：

.box_item {
    float: left;
    height: 190px;
    width: 190px;
    overflow: hidden;
    border: 1px solid grey;
    padding: 5px;
    margin: 5px 5px 0px 0;
}
.box_item_img{
    width: 180px;
    height: 60px;
    margin: 5px;
}

我希望图像显示在框的顶部，其尺寸由box_item_img类指定。 相反，我得到的拉伸图像几乎扩展到整个盒子（顶部和左侧留有5px的边距）。

想法？

Answer 1

您提供的CSS规则工作正常。必须有一些其他样式规则干扰，例如，通用img规则。

只需检查FireBug或Chrome开发人员工具中的img和div元素，然后查看适用于每个元素的规则。然后尝试逐一删除最可疑的规则以找到真正的原因。