在CSS中对图像进行调整大小、裁剪和添加边框

Question

我只想用css转换图像，方法是：

1. 将图像缩小到35px*35px
2. 裁剪以删除不需要的边框(增加20%(
3. 添加css实心边框

我已经设法做出了这样的工作，但这似乎有些过头了，有什么简单优雅的解决方案吗？

<div style="border: 1px solid rgb(163,53,238); width:25px;height: 25px;"><img src="https://i.stack.imgur.com/vTp2a.png" width=42 height=42 style="clip-path: polygon(20% 20%,80% 20%,80% 80%,20% 80%);margin:-8.4px"></div>

编辑：输入图像将始终是方形

Answer 1

您可以更新这两个元素的宽度。

<div style="border: 1px solid rgb(163,53,238); width:35px;height: 35px;"><img src="https://i.stack.imgur.com/vTp2a.png" width=52 height=52 style="clip-path: polygon(20% 20%,80% 20%,80% 80%,20% 80%);margin:-8.4px"></div>