Css div中图像的反求维

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

我希望图像以box\u item\u img类指定的尺寸显示在框的顶部。 取而代之的是，我得到了一个几乎扩展到整个盒子的拉伸图像（顶部和左侧都留有5px的边距）

---

想法？

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

img

规则

---

只需检查FireBug或Chrome developer工具中的

img

和

div

元素，看看它们都应用了哪些规则。然后尝试逐个删除最可疑的规则，以找到真正的原因。

-似乎与您在CSS中编写的完全一样。对我来说，您的代码也产生了预期的输出。检查图像的实际尺寸；是否裁剪为180x60？否则，我觉得没问题：@JoeJ如果你像Patrick那样明确指定它的尺寸，它就不必被裁剪。@Shedal我理解，但它可能会纠正他的拉伸图像问题：

.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;
}