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!
Top comments (2)
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.
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! ๐