I recently encountered an issue where I set up an image to scale to full width, but it was always cut off at the bottom when it extended too high. Here is my current setup:
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; }
Everything seems fine when the image exceeds 100px in height. However, if the image is smaller than the maximum height set for its container ("top"), there is a noticeable gap between the image and the div below it. The container's height is not adjusting correctly to the displayed image, causing this unexpected behavior.
To test the issue yourself, visit this link: http://jsfiddle.net/lborgman/5mBPv/7/
My observations were made using the latest version of Chrome (Version 33.0.1750.154 m) on Windows operating system. UPDATE: Similar behavior was observed in Firefox and IE 11 as well.
UPDATE 2: Interestingly, upon closer inspection, I noticed that the gap between #image and #bottom consistently measures 4px. This adds another layer of complexity to the issue at hand.