CODEWITHSUNDEEP
htmlcssimage
Leo
Leo

Reputation: 4438

Why is there a space between the image and the div below?

I have set up to scale an image to full width, but cut the bottom of it when it gets to high. The setup is this:

div, img, body {
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: auto;
}
#top {
    max-height: 100px;
    width: 100%;
}
#bottom {
    height: 200px;
    width: 100%;
    background: green;
}
body { background: yellow; }

This looks as expected when the image height is over 100px. However when the image height is smaller than the containers max-height (which is 100px) there is a gap between the image and the div below. The height of the image's container div ("top") is bigger than the height of displayed image. I can't understand why.

Test it here: http://jsfiddle.net/lborgman/5mBPv/7/

I am doing this in latest Chrome (Version 33.0.1750.154 m) on Windows. UPDATE: Just tested i Firefox. I see the same thing there. And in IE 11.

UPDATE 2: It looks like the gap between #image and #bottom is always 4px. That looks interesting.

Upvotes: 0

Views: 2365

Answers (3)

Rohit
Rohit

Reputation: 324

TRY this....

img {
   margin: 0;
   padding: 0;
   display:block; 
}

Setting img as display:block will resolve the issue

Upvotes: 2

Despato
Despato

Reputation: 121

This probably happens because the image does not auto-fit to the size of the container. It will overflow the box. The easiest fix to this is to just put:

#img{
    width:100%;
    height:heightofcontainer;
}

Your other option is on the #top to put overflow:hiddin; but this will cut off the image.

Also, this may help: How do I auto-resize an image to fit a div container

Upvotes: 0

kba
kba

Reputation: 19476

The height of the image's container div ("top") is bigger than the height of displayed image.

The problem is that the above isn't necessarily true. The browser up- or down-scales the image to maintain proportions when you set a width, in this case width:100%. For instance, if your picture is 100x100, but the box it is in is 300px wide, the picture will be upscaled to be 300x300, thus higher than the container.

Upvotes: 2

Related Questions