Circular Avatars: Gotcha & Solution

Gotcha: `rounded-full` on a Rectangular Image

If the image is rectangular (e.g., 200x100 pixels), `rounded-full` will create an ellipse.

<img src="200x100_image.png" class="rounded-full"> (Results in an oval)

Notice this is an ellipse, not a circle.

Solution: Square Container + `object-cover`

Using a square container (`w-32 h-32 rounded-full overflow-hidden`) and an image with `w-full h-full object-cover`.

Container: <div class="w-32 h-32 rounded-full overflow-hidden">

Image: <img src="..." class="w-full h-full object-cover">

This is now a perfect circle, even with a rectangular source image.