[BUG] - An image in <Avatar> component loses a lot quality if the image is not square

[Kismet333]

HeroUI Version

2.7.2

Describe the bug

Whenever you try to use an image that is not square for the <Avatar> component, the image quality becomes poor. I think this applies for any image that is not perfectly square. I even tested this by changing a 400x400px image to 395x400px and the new image lost a lot of quality just because it wasn't perfectly square.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create an <Avatar> component and use any non-square image for it.
2. Observe the poor quality of the image

Expected behavior

Quality of the image should not be dropping

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-2297 [BUG] - An image in <Avatar> component loses a lot quality if the image is not square

[wingkwong]

Looks fine to me. Can you please share your code, a screenshot of your screen and the photos you used to test?

[Kismet333]

Hi, and thanks for your response @wingkwong.

I am just using a very simple implementations of <Avatar> throughout my project and I still see the same issue. Here is an example of one such use:

<Avatar className="h-14 w-14" src={project.avatarUrl} />

I have discovered a critical piece of information for this bug: The lower image quality is only visible if the image is small. If you either zoom in on your web browser or make the avatar's size to be large, you will not see the lower quality of the image. I would suggest for you to attempt to reproduce by using the same image but making the <Avatar> small. The smaller the <Avatar> gets, the more obvious the loss of quality becomes.

I took some screen shots of an example I created. I took the image you supplied, copied it, and resized the copy to be exactly square. You can see a side by side comparison of what I mean.