Fixed Avatar Size With Aspect-Square And Flex-Shrink-0 Classes
Keep your avatar size fixed with `aspect-square` & `flex-shrink-0` classes. This ensures width & height are equal, preventing stretching or changes. Add these 2 classes to maintain a fixed size!
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"...