我正在尝试将图像放置在其容器内。因为容器具有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;

}

最佳答案

它应该改为bottom: -50%,以便将图像高度移至容器底部的50%,而不是向上移至容器的底部边缘。

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

关于html - 当父图像溢出时定位图像:隐藏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22811462/

10-10 18:41
查看更多