html - 当父图像溢出时定位图像 : hidden

Question

我正在尝试将图像放置在其容器内。因为容器有 overflow:hidden，它隐藏了一半图像 — 我想添加 bottom: 50%，所以它显示图像的中心。

目前，如果我这样做，您会看到图像与其父图像之间存在间隙。谁知道如何定位它，以便您看到图像的中心？

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

它应该是 bottom: -50%，所以它会将图像 向下 移动容器高度的 50% 到容器的底部边缘，而不是向上远离它。

为 top, right, bottom and left 指定值时，正值将元素移离相应的一侧，负值将元素移向相应的一侧。