How to fill div with image

Question

i have this responzive grid and I dont know hot to remove space between top and bottom of div. How to fill with image whole div? You can see it here 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%; 
}

rst · Accepted Answer · 2015-06-04T14:08:01.650

4

Here you go

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

this was missing

img {
    display:block;
}

edited Jun 04 '15 at 14:08

answered Jun 04 '15 at 14:02

rst

2,510
4
21
47

Didn't notice that :) – Drops Jun 04 '15 at 14:04
You might want to mark the question as answered :-) – rst Jun 04 '15 at 14:06
Am I just dumb or is your fiddle really identical to OP's? – Siguza Jun 04 '15 at 14:06

score 1 · Answer 2 · edited May 23 '17 at 12:05

If regardless of the page width you're only having issues with the top and bottom of the image leaving space, you need height 100% rather than width:

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/

But if the space can sometimes appear top and bottom, there is a good answer to responsive image resizing here: Make image fill div completely without stretching

score 0 · Answer 3 · answered Jun 04 '15 at 14:04

0

EDIT: RobertStettler's answer is the one to go for.

Just add font-size: 0 to parent of divs, in your case to body and later restore it on children.

body { font-size: 0 }

Demo

answered Jun 04 '15 at 14:04

Drops

2,680
18
16

score 0 · Answer 4 · answered Jun 04 '15 at 14:07

0

You want to add "display: block" to "div img". Images are actually textual elements, and therefore get the text gutter for the low-hanging bottoms of "g" and "j" and stuff.

answered Jun 04 '15 at 14:07

Jonathan Card

122
1
8

How to fill div with image

4 Answers4