Fix the complete display of avatar

[seepine]

Fix #31990

[lunny]

Can you paste the screenshot before and after?

[seepine]

Before

After

[delvh]

Non-quadratic images might now look strange, but I think that's okay.

[silverwind]

I think I'm against it. cover will crop the avatar to the smallest dimension. I see more value in showing the full avatar. For example https://en.wikipedia.org/wiki/Longcat#/media/File:Longcat_is_loooooooooong.jpg:

contain:

cover (head cut off):

Ideally we should provide a cropping UI for avatar uploads, until then users need to pre-crop their images:

[seepine]

Of course the cropped like GitHub would be better.
But cover has achieved the closest effect, solving the current problem.
Unfortunately i wirte vue only and unable to complete this function, i will close this pr if the cover is unnecessary.

[silverwind]

I'd keep it as-is with contain as that ensures no cut-off content which is arguably better then the auto-cropping of contain which may crop wrongly. We should integrate a JS solution to let the user crop the image before upload. Maybe I will contribute that later. Sorry to close your first PR, maybe you find other areas to contribute.

[seepine]

I'd keep it as-is with contain as that ensures no cut-off content which is arguably better then the auto-cropping of contain which may crop wrongly. We should integrate a JS solution to let the user crop the image before upload. Maybe I will contribute that later. Sorry to close your first PR, maybe you find other areas to contribute.

My English is not good; if my expression is unclear, you can contact me in the QQ group chat 328432459.

1. I believe that the cropping feature and setting the avatar image as a cover do not conflict. The cover is designed to ensure that the image is displayed as expected. Even if you add a cropping feature, if users directly modify the image using the API, it will still result in the display issues I mentioned.
2. I am skeptical about the example you provided; it's clear that displaying the image in its entirety would be better than having an empty area in the avatar. The 'contain' option seems to be acting like a bug.

3. In version 1.22.0, uploading an avatar directly results in it being cropped to a cover effect. Setting the image display to 'cover' is actually a way to maintain compatibility with older versions and keep the display effect consistent. You can't wait for the feature to go live and then notify each user with an incorrectly set avatar to update their profile picture one by one.
4. Discord、bilibili、juejin, they also use cover.

Img

Discord

bilibili

juejin

[seepine]

Not cover, it like a bug.