CSS使圖像的高度被自動固定高度的容器

我用以下解決方案試圖內拉伸：CSS使圖像的高度被自動固定高度的容器

<div class="item"> 
    <img src="http://2.bp.blogspot.com/-nXak3-M8QG4/ULtEsnBI0RI/AAAAAAAAAOA/7uEYy1oExZc/s1600/black-desktop-computer.jpg"/> 
</div>

這裏是CSS：

img { 
    width:120px; 
    height: auto; 
} 

.item { 
    border:1px solid pink; 
    width: 120px; 
    height: auto; 
    margin: 3px; 
    padding: 3px; 
    background-color: red; 
}

請看看這個fiddle查看輸出。

有一個額外的底部空間。我想刪除額外的空間。我嘗試了很多組合，但沒有成功。

任何其他解決方案將是首選。請幫忙。

來源

2017-04-09 Sandeep Sharma

試試這個：

img { 
     width:120px; 
     height: 100%; 
     display: table-cell; 
    } 

    .item { 
     border:1px solid pink; 
     width: 120px; 
     height: 100px; 
     display: table; 
     margin: 3px; 
     padding: 3px; 
     background-color: red; 
    }

請讓我知道，如果這是你wnated什麼。

來源

2017-04-09 12:47:20 SreenathPG