Thanks to a post I read from @J805.
I could upload a picture with the picture uploader and have the image preview fit nicely in the circular preview.
I noticed what J805 did that was different from the standard picture uploader, was that he basically just set the background style of the uploader to an image, and in that way it worked.
For such a simple thing as uploading an image that you want to be displayed neatly in a circular frame, I think this isn’t good from the picture uploader standard behavior. It’s not good that you have to do a hacky workaround just to display the image in a circle.
In my original post above, you can see the standard behavior of the picture shows the entire image zoomed out with a “letterbox” compared to what the image looks like in a normal image element.
It would be great if the picture uploader was updated to make it easier to upload circular images