Position an image when it's parent has overflow: hidden - html

Question

I'm trying to position an image inside its container. Because the container has overflow:hidden, it is hiding half of the image — I would like to add bottom: 50%, so it shows the center of the image.
At the moment, if I do so, you see a gap between the image and its parent. Would anyone know how to position this, so you get to see the center of the image?
http://jsfiddle.net/tmyie/RGfdh/1/
<div class="img-ctnr-med">
<a href="#">
<img src="http://placehold.it/200x200" alt=""/>
</a>
</div>
img {
background-color:grey;
display: block;
position: absolute;
}
.img-ctnr-med {
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
overflow: hidden;
}

Answer 1

It should be bottom: -50% instead, so it shifts the image 50% of the height of the container down towards the bottom edge of the container rather than up away from it.
When specifying values for top, right, bottom and left, positive values shift an element away from the respective side and negative values shift an element towards the respective side.

Answer 2

I think the best way to do this is to include the image as background image. It is cleaner then moving around elements. See this Fiddle as example.
html:
<div class="img-ctnr-med">
link text
</div>
css:
img {
background-color:grey;
display: block;
position: absolute;
bottom: 30px;
}
.img-ctnr-med a {
width: 100px;
height: 100px;
color: transparent;
text-indent: -9999px;
display: block;
border: 1px solid blue;
position: relative;
overflow: hidden;
background-image: ;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}

Answer 3

Modify
img {
background-color:grey;
display: block;
position: absolute;
}
To
img {
background-color:grey;
display: block;
position: absolute;
left: -50%;
top:-50%;
}