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

Posted 2023-02-25

【中文标题】css - 容器与内部剪辑元素不匹配

【英文标题】：css - container not match inner clipped element

【发布时间】：2021-02-15 02:48:45

【问题描述】：

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

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

.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" >
</div>

【参考方案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" >
</div>

【参考方案2】：

用计算函数改变上/左！

.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" >
</div>