使用css

Question

我有这个代码用css

创建一个圆形图像

  <div class="round2">
    <img src="http://fwncwww14.wks.gorlaeus.net/images/home/news/mbt_pasfoto_Dino_van_Dissel.jpg" />
  </div>

.round2 {
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
}
.round2 img {
    display: block;
    /* Stretch
          height: 100%;
          width: 100%; */
    min-width: 100%;
    min-height: 100%;
}

现在我想成为图像中间的圆圈，而不是图像的顶部位置。你们中的任何人都知道如何实现这个目标吗？

非常感谢！

Answer 1

只需将其移至50%然后transform将其移回50%，如下所示：

.round2 {
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
}
.round2 img {
    display: block;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    /* use `calc(50%)` if you want to be old-browser safe */
    left: 50%;
    top: 50%;
    /* Be sure to prefix where necessary */
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<div class="round2"><img src="http://placehold.it/450x350" /></div>

现在只需放置外部.round2类框即可移动图像。这是有效的，因为translate函数与img元素width相关，而不是父容器'。

Answer 2

将display: inline-block;或display: block;添加到.round2班级。

.round2 {
    display: block; /* or inline-block */
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
}