CODEWITHSUNDEEP
htmlcssimage
user4394417
user4394417

Reputation:

How to fill div with image

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%; 
}

Upvotes: 0

Views: 9166

Answers (4)

MikeK
MikeK

Reputation: 383

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

Upvotes: 1

rst
rst

Reputation: 2724

Here you go

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

this was missing

img {
    display:block;
}

Upvotes: 4

Jonathan Card
Jonathan Card

Reputation: 144

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.

Upvotes: 0

Drops
Drops

Reputation: 2740

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

Upvotes: 0

Related Questions