如何解决css - 容器与内部剪裁元素不匹配
我尝试将内部剪裁的图像放入容器中,但看起来它没有完全放在容器的中心!
进行匹配以将内部元素准确定位在容器中心的正确方法是什么?
.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>
解决方法
这是您要找的吗?我更新了 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>
用calc函数改变上/左!
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。