How to Keep Avatar Size Fixed?

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