禁止在一個div中的圖像尺寸

我有一個div（這是一個200x200平方），其中我想放置一個180x60圖像在頂部，然後一些文本。禁止在一個div中的圖像尺寸

<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的邊距）。

想法？

來源

2012-04-22 Patrick

[jsFiddle Demo]（http://jsfiddle.net/4MfPY/） - 似乎完全是你在CSS中寫的。 – kapa 2012-04-22 18:41:48

對我來說，你的代碼也在產生預期的輸出。 – 2012-04-22 18:44:16

檢查您的圖像的實際尺寸;它裁剪到180x60？否則，對我來說似乎很好：http://dabblet.com/gist/2466164 – JoeJ 2012-04-22 18:51:17

你給的CSS規則工作正常。必須存在一些其他造型規則，例如通用的img規則。

只需檢查FireBug或Chrome開發人員工具中的img和div元素，並查看應用於每個元素的規則。然後嘗試逐個刪除最可疑的規則以找到真正的原因。

來源

2012-04-22 18:44:46

禁止在一個div中的圖像尺寸

回答

相關問題