DEV Community

Joodi
Joodi

Posted on โ€ข Edited on

5 2 2 2 2

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.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
himanshu_code profile image
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.

Collapse
 
joodi profile image
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! ๐Ÿ™Œ

nextjs tutorial video

Youtube Tutorial Series ๐Ÿ“บ

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series ๐Ÿ‘€

Watch the Youtube series