html - 带有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%，然后将其转换 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 相关，而不是父容器的。