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

编辑：RobertStettler的回答是可以接受的。

只需将font-size: 0添加到div的父级，在您的情况下添加到body，然后将其恢复为子级。

body { font-size: 0 }

Demo

Answer 3

你想要添加＆＃34; display：block＆＃34; to＆＃34; div img＆＃34;。图像实际上是文本元素，因此可以得到文本的阴沟，用于＆＃34; g＆＃34;和＆＃34; j＆＃34;和东西。

Answer 4

如果不考虑页面宽度，您只需要留下图像顶部和底部留下空间的问题，则需要高度100％而不是宽度：

HTML：

implicit def composed4[X, Y](implicit f1OfX: F1[X] { type result = Y },
  f2OfLast: F2[Y]): Composed[X] =
    new Composed[X] { type result = f2OfLast.result }

CSS：

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

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

但如果空间有时可以显示在顶部和底部，那么响应式图像调整大小的答案很好：Make image fill div completely without stretching

如何用图像填充div

4 个答案: