如何用圖片填充div

Question

我有這個自適應網格，我不知道刪除div頂部和底部之間的空間很熱。 如何用整個圖像填充div？ 您可以在這里https://jsfiddle.net/jo3jorch/1/

<div>
<img src="http://beyondeurope.net/wp-content/uploads/2014/08/Top_10_Universities_in_New_York_City.jpg">
</div>

div {
   width: 50%;
   float: left; 
}
div img {
   width: 100%; 
}

Answer 1

干得好

https://jsfiddle.net/b7nxzt8m/1/

這不見了

img {
    display:block;
}

Answer 2

編輯：羅伯特·斯蒂特勒的答案是一個。

只需將font-size: 0添加到div的父級，然后添加到body ，然后再將其恢復到子級。

body { font-size: 0 }

演示

Answer 3

您要在“ div img”中添加“ display：block”。 圖像實際上是文本元素，因此對於“ g”，“ j”和其他東西的低垂的底部具有文本裝訂線。

Answer 4

如果不考慮頁面寬度，僅在圖像頂部和底部留有空間問題，則需要高度100％而不是寬度：

HTML：

<div id="newyork">
    <img src="http://beyondeurope.net/wp-content/uploads/2014/08/Top_10_Universities_in_New_York_City.jpg" />
</div>

CSS：

#newyork {
   width: 300px;
   height: 300px;
   background: red;
}

#newyork img {
    height: 100%;
    width: auto;
}

https://jsfiddle.net/jo3jorch/8/

但是，如果有時該空間可能出現在頂部和底部，則可以對此處的響應圖像大小進行調整，這是一個很好的答案： 完全使圖像填充div而不拉伸