![](https://davidstockdalescrapcode.co.uk/wp-content/uploads/2021/07/sound.jpg)
Figured out a couple ways to crop images in a few ways without having to handle it at upload.
Circle
To crop an image into a circle:
img {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
}
Before
![](https://davidstockdalescrapcode.co.uk/wp-content/uploads/2020/09/a.jpg)
After
![](https://davidstockdalescrapcode.co.uk/wp-content/uploads/2020/09/b.jpg)
Square
To crop an image into a square:
img {
object-fit: cover;
width: 9.5em;
height: 9.5em;
}
Before
![](https://davidstockdalescrapcode.co.uk/wp-content/uploads/2020/09/c.jpg)
After
![](https://davidstockdalescrapcode.co.uk/wp-content/uploads/2020/09/d.jpg)
Now I just need to figure out how to register these as custom Gutenberg Block Styles…