Resize, crop and add a border to an image in CSS

user_1413909 0
Viewed 37

I would like to transform an image only with css, in this way :

  1. Scale down image to 35px*35px
  2. Crop it to remove unwanted borders (by 20%)
  3. Add a css solid border

I've managed to make something that kind of work but it seems to be an overkill, is there any simple and elegant solution ?

<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>

edit: Input image will always be squarish

css html
1 Answers

You can update the width of both elements.

<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>

user_87821410
Related