 <p>The issue is in the fact that by default images are vertically aligned with the baseline. You can see this if you put an image next to some text. The image aligns to the baseline of the text, while letters like g and y go below the baseline. The space you are getting is the space below the baseline which is for the letters to go below. If you change the <code>vertical-align</code> to <code>top</code> the space will disappear.</p> <p><a href="http://jsfiddle.net/YJZRE/" rel="nofollow">http://jsfiddle.net/YJZRE/</a></p> <pre><code>.artwork img { height: 100%; vertical-align: top; } </code></pre>