search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.89k stars 423 forks source link

Avatars squish images with non-1:1 aspect ration #779

Closed rmkerr closed 1 year ago

rmkerr commented 1 year ago

Describe the bug

Images used for avatars with non-square aspect ratios get distorted. If using non-react flowbite components I can add object-cover to the image to fix this -- but adding it to the Avatar component just applies it to the wrapper div, and does not fix the issue.

To Reproduce Steps to reproduce the behavior:

<Avatar rounded img="https://www.gettyimages.com/gi-resources/images/Embed/new/hero.jpg" size='xl' />

Expected behavior

Image is cropped instead of stretched/compressed.

Screenshots

image
rluders commented 1 year ago

TBH, I don't think that this is an issue, your image probably just doesn't have the correct aspect ratio, and you have to fix it. On the other hand, if you want to crop it, you can probably play with the theme and add the desired customization to change it.