img inside div with padding

Question

I'm trying to wrap a div around an image. The image is larger than the div size. by using Overflow: hidden I have hidden the part of image outside the div. Now I want to set padding for my div, so the image doesn't fill all the div area. But it seems like the img ignores the bottom-right padding values.

To be more clear, here's what I have now (http://jsfiddle.net/sAYEq/4/):

And here's what I'm trying to achieve:

Please note that I do not want to set my image's width/height since I want the image to be in its actual size and the parts outside the div should not be displayed.

Answer 1

Simply give your wrapper 100% width and height:

#wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    border: 1px solid green;
}

It will work as you want it to.