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

想法？

Answer 1

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

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