css - 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 类指定。相反，我得到一个拉伸(stretch)图像，几乎扩展到整个框(顶部和左侧留有 5 像素的边距)。

想法？

Answer 1

您提供的 CSS 规则运行良好。必须有一些其他样式规则干扰，例如，通用 img 规则。

只需检查 FireBug 或 Chrome 开发人员工具中的 img 和 div 元素，看看它们各自应用了哪些规则。然后尝试一条一条地删除最可疑的规则，以找出真正的原因。