rounded-full
on a Rectangular Image
Applying
rounded-full
directly to a non-square image results in an ellipse (oval), not a perfect circle.
Notice how the image below is stretched into an oval shape.
Image (150x100) with
rounded-full
object-cover
To ensure a perfect circle with a rectangular image, use a square container (e.g.,
w-32 h-32
)
with
rounded-full
. Then, place the
<img>
tag inside it with classes
w-full h-full object-cover
. The
object-cover
class will scale the image to maintain its aspect ratio
while filling the container, cropping any excess.
Original Rectangular Image (150x100):
Correctly Rounded:
Container:
w-32 h-32 rounded-full overflow-hidden
Image:
w-full h-full object-cover
Original Rectangular Image (100x150):
Correctly Rounded (Tall Image):
Container:
w-32 h-32 rounded-full overflow-hidden
Image:
w-full h-full object-cover
Key Insight:
The
overflow-hidden
on the container is technically not always needed if the image is a direct child and
rounded-full
is on the container, but it's good practice for clip-path like effects and consistency, especially if there were other nested elements or pseudo-elements. The core combination is the square container +
rounded-full
for the shape, and
object-cover
on the image for correct filling and cropping.