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