How to Keep Avatar Size Fixed in Tailwind CSS

When you want to keep the avatar size fixed and prevent it from stretching or changing, you can use these two classes:

✅ aspect-square: This class ensures that the width and height of the avatar are always equal, making it a perfect square.

✅ flex-shrink-0: This class prevents the element from shrinking when the container size changes.

Code example:

<div className="flex items-center gap-4 mb-4">
  <div className="w-20 h-20 bg-gray-300 rounded-full shadow-md aspect- square flex-shrink-0"></div>
  <div className="flex flex-col gap-2 w-full">
    <div className="w-3/4 h-5 bg-gray-300 rounded"></div>
    <div className="w-1/2 h-4 bg-gray-300 rounded"></div>
    <div className="w-2/3 h-4 bg-gray-300 rounded"></div>
  </div>
</div>

Just like that! 😄 Add these two classes to the avatar element, and it will always maintain a fixed size.

I hope this was helpful, and I’d be happy to connect and follow each other!

• Github
• Medium
• LinkedIn

Comments

[Himanshu Sorathiya]

Nice, will use that,
One note, you should've made title like how to keep Avatar size fixed in Tailwindcss, as it's totally tailwindcss classes, I knew that directly from your code and your way of description, but most people couldn't, so make article title proper. Please don't feel bad, you're doing great job.

[Joodi]

Thanks for pointing that out! You’re absolutely right, the title could’ve been clearer. I’ve updated it to make it obvious that it’s about Tailwind CSS. Appreciate the feedback, and I’d love to hear any other thoughts you have! 🙌