css - 剪辑图像并添加边框以适应 div
css - clip image and add border to fit in div
我希望从图像 src 中剪下一个 80px 的圆,在剪下的部分周围添加一个红色边框(圆),然后适合 div 框。
下面是一个示例,但红色边框不起作用。我希望剪裁部分仅适合 div 但现在 div 大小是原始图像大小。
.my-clip {
position: absolute;
clip-path: circle(80px at 50% 25%);
border:1px solid red;//wish to get a circle border around the clipped portion
background-color: #bdbdbd;
box-sizing: border-box;
}
.square {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
border: 1px solid red;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>
更新:
我尝试使用 calc 函数来更改位置,但看起来数学不正确!
.my-clip {
position: absolute;
--x: 150px;
--y: 100px;
left: calc(80px + 5px - var(--x));
top: calc(80px + 5px - var(--y));
clip-path: circle(80px at var(--x) var(--y));
background-color: #bdbdbd;
}
.square {
position: relative;
width: 170px;
height: 170px;
overflow: hidden;
border: 5px solid lightgray;
border-radius:50%;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>
调整不同的值,你可以用 border-radius:
.my-clip {
position: absolute;
left: 50%;
top: -6%;
transform: translate(-50%);
/*clip-path: circle(80px at 50% 25%); no more needed*/
background-color: #bdbdbd;
}
.square {
position: relative;
width: 160px;
height: 160px;
overflow: hidden;
border: 1px solid red;
border-radius: 50%;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>
我希望从图像 src 中剪下一个 80px 的圆,在剪下的部分周围添加一个红色边框(圆),然后适合 div 框。
下面是一个示例,但红色边框不起作用。我希望剪裁部分仅适合 div 但现在 div 大小是原始图像大小。
.my-clip {
position: absolute;
clip-path: circle(80px at 50% 25%);
border:1px solid red;//wish to get a circle border around the clipped portion
background-color: #bdbdbd;
box-sizing: border-box;
}
.square {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
border: 1px solid red;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>
更新: 我尝试使用 calc 函数来更改位置,但看起来数学不正确!
.my-clip {
position: absolute;
--x: 150px;
--y: 100px;
left: calc(80px + 5px - var(--x));
top: calc(80px + 5px - var(--y));
clip-path: circle(80px at var(--x) var(--y));
background-color: #bdbdbd;
}
.square {
position: relative;
width: 170px;
height: 170px;
overflow: hidden;
border: 5px solid lightgray;
border-radius:50%;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>
调整不同的值,你可以用 border-radius:
.my-clip {
position: absolute;
left: 50%;
top: -6%;
transform: translate(-50%);
/*clip-path: circle(80px at 50% 25%); no more needed*/
background-color: #bdbdbd;
}
.square {
position: relative;
width: 160px;
height: 160px;
overflow: hidden;
border: 1px solid red;
border-radius: 50%;
}
<div class="square">
<img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>