Question

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

目前，如果我这样做，你会发现图像与其父母之间存在差距。有人会知道如何定位这个，所以你可以看到图像的中心吗？

<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的值时，正值会将元素从相应的边移开，而负值会将元素移向相应的边。

Answer 2

修改

img {
  background-color:grey;
  display: block;
  position: absolute;
}

要

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

Answer 3

我认为最好的方法是将图像包含为背景图像。它更干净，然后移动元素。请将此小提琴视为example。

HTML：

<div class="img-ctnr-med">
    <a href="#" style="background-image: url(http://placehold.it/200x200);">link text</a>
</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;
}

当图像的父级溢出时隐藏图像：隐藏

3 个答案: