My profile picture is distorted

Question

This is what my profile picture should look like:

But resized.

Here is what it looks like in my profile from my computer:

Here is what it looks like from my phone:

You can notice the wrong proportions, although I don't know why they happen. I'd like to know if there is anything I can do on my side to avoid the bug, and for my photo to appear with normal proportions.

Answer 1

The site's UI assumes that all avatars are square and the profile page is no exception; on your profile, SE is using your full-size uploaded image, but it has height and width attributes set so that the browser renders it at 164x164 pixels.

<div class="gravatar-wrapper-164">
    <img src="https://i.stack.imgur.com/wpgps.jpg?s=328&amp;g=1" alt="" class="bar-sm avatar-user" width="164" height="164">
</div>

I don't specifically know why SE is doing that rather than doing a proper crop/resize of your image. but I would hazard a guess that the intention is that in the full profile view, they want the best quality version of your avatar possible, so they just use the original image and have the browser render it to fit rather than resampling and potentially losing quality. Unfortunately they've done it in a very naive way - CSS rendering options that would preserve the aspect ratio correctly do exist, but for whatever reason SE is not using them here.

At any rate, solving the problem is easy. Stack Exchange wants your avatar to be square, so just give them a square avatar to begin with - use the image editing tool of your choice to crop the photo to square dimensions and reupload it. This also has the advantage that, in cases where the site does actually crop and resize your image, you get to choose where the crop is centred, so it doesn't cut off the top of your head or anything like that.