0

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.

Leo
  • 4,136
  • 6
  • 48
  • 72

3 Answers3

2

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.

kba
  • 19,333
  • 5
  • 62
  • 89
  • Thanks @kba, but I do not understand what you mean. The containing box is the problem, of course. It is a bit higher than expected, but just a little bit. Some pixels. It follows the image height, but it put on some extra height for some reason. – Leo Mar 25 '14 at 02:41
  • @Leo What box? `
    ` is a maximum of 100px as your CSS says. `
    ` is exactly 200px, again, as your CSS says. What div is it you feel is bigger than it should be? `
    ` has no height defined, so I don't assume that's the one?
     – kba Mar 25 '14 at 02:50
  • I get it. Resize the fiddle viewport to a small size and you'll see: image -> yellow -> green -> yellow regardless of viewport size. He wants it to be: image -> green -> yellow. Does `#top` have to bee 100px in height no matter what? – hungerstar Mar 25 '14 at 02:51
  • Thanks @hungerstar, I corrected the image mentioned in the fiddle. It does not affect the outcome, however. When image height is less than the containing div's max-height there is a gap between the image and #bottom. – Leo Mar 25 '14 at 02:53
  • @Leo Ah, I get it now. Yes, the div has a hidden minimum height defined, becuase it's giving you enough space to write in it. Adding either `font-size: 0;` or `line-height: 0` will solve this. – kba Mar 25 '14 at 03:04
  • @kba, yes, there is something, but the yellow space between is not the whole #top div. It is just the bottom of it. So I would guess it is not font-size or line-height, but maybe something close to it? – Leo Mar 25 '14 at 03:06
  • Eh, but it was font-size! You were right, @kba, but I do not understand why. ;-) – Leo Mar 25 '14 at 03:08
  • Maybe you want to suggest an explanation as a solution, @kba? ;-) – Leo Mar 25 '14 at 03:22
  • @Leo As I said, the box has a hidden height defined to accomodate any text you might write in it. By reducing the size of this "potential text" to nothing, the gab goes away. – kba Mar 25 '14 at 03:49
  • Yes, I think you are right, @kba, but I can't understand the logic. Actually setting line-height:13px makes the gap disappear, but any taller line-height creates a gap. (My initial guess was that this had something to do with max-height, but that does not seem to be the case.) – Leo Mar 25 '14 at 11:18
  • What are the rules? The answer to my question is in the thread here, but not in the answer that starts this thread. Should I accept this answer then, or? – Leo Apr 13 '14 at 00:41
  • @Leo Well, it's best to accept an answer to your question. I would probably accept this answer if I was in your shoes, but I'm probably a little biased. ;-) If you have found a better explanation than the one I offered, you could post an answer yourself and accept that, too. – kba Apr 13 '14 at 13:53
2

TRY this....

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

Setting img as display:block will resolve the issue

Rohit
  • 324
  • 2
  • 9
  • removing #top{max-height:100px} will not help anyway cause it means that you can stretch that div to 100px but don't define it height in case height is less than 100px. So under 100px height it will be according to content of Div ...Thanks – Rohit Mar 25 '14 at 08:12
0

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

Community
  • 1
  • 1
Despato
  • 121
  • 4
  • Thanks. I could surely do that with javascript, yes, but I would like to avoid that. (And it "underflows"... ;-) ) – Leo Mar 25 '14 at 02:37
  • @Leo What are you trying to accomplish with your code? I'm not sure I understand the layout you have in mind. – kba Mar 25 '14 at 02:39
  • Please see the fiddle, @kba. I want the #bottom div to stay connected to the image all the time. Now there is space between when the image height is less than the max-height of its containing div. – Leo Mar 25 '14 at 02:43