如何移动我放置圆形裁剪的图像部分？

Question

.rounded-profile-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
}

上面的内容符合我的要求，但它并没有完全以人脸为中心。我尝试添加

    transform: translate(0px, 10px);

但这并没有达到预期的效果，因为它只是移动了整个元素。

如何将圆居中于图片的正确位置？

Answer 1

您可以使用

<img>

 和 

object-fit

（这些可以控制图像的像素内容在 

object-position 中的布局方式）来使用单个 <img>

 标签（并避免额外的 html） 

标签的边界框）。例如这张图片：

img {
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000;
  width: 100px; height: 100px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" width="113" height="170" />

只需添加适当的

object-position

即可居中：

img {
  object-fit: cover;
  object-position: 0 -6px; /* this is the only change */
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000;
  width: 100px; height: 100px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" width="113" height="170" />