css

Question

我尝试将内部裁剪图像放入容器中，但看起来它并没有完全放在容器的中心！

将内部元素准确定位在容器中心的正确方法是什么？

.container {
     position: relative;
     width: 130px;     
     height: 130px;
     overflow: hidden;
     border: 5px solid #e0e0ef;
     border-radius:50%;
}
.inner {
  position: absolute;
  top: -140px;/**/
  left: -160px;/**/
  clip-path: circle(60px at 200px 220px);
  background-color: #ece0e0;
}

<div class="container">
<img class="inner"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/440px-Crateva_religiosa.jpg" alt="alternatetext">
</div>

Answer 1

这是您要找的吗？我更新了 clip-path: circle() 声明，特别是两个 position 值。 60px 的圆圈半径没有改变，但是圆心的位置值发生了变化，在父容器中看起来更居中。

.container {
     position: relative;
     width: 130px;     
     height: 130px;
     overflow: hidden;
     border: 5px solid #e0e0ef;
     border-radius:50%;
}
.inner {
  position: absolute;
  top: -140px;/**/
  left: -160px;/**/
  clip-path: circle(60px at 225px 205px);
  background-color: #ece0e0;
}

<div class="container">
<img class="inner"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/440px-Crateva_religiosa.jpg" alt="alternatetext">
</div>

Answer 2

更改 top/left 带计算功能！

.container {
     position: relative;
     width: 130px;     
     height: 130px;
     overflow: hidden;
     border: 5px solid #e0e0ef;
     border-radius:50%;
}
.inner {
  --x: 200px;
  --y: 220px;
  position: absolute;
  top: calc(60px + 5px - var(--y));
  left: calc(60px + 5px - var(--x));
  clip-path: circle(60px at var(--x) var(--y));
  background-color: #ece0e0;
}

<div class="container">
<img class="inner" style="--x:150px;--y:100px"   src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/440px-Crateva_religiosa.jpg" alt="alternatetext">
</div>

css - 容器与内部剪裁元素不匹配

css - container not match inner clipped element

html

clip