7

It looks like profile pictures are just stretched to be squares. Look at this profile:

https://stackoverflow.com/users/191226/bill-criswell

A sweet and simple object-fit: cover or object-fit: scale-down would be great.

  • There used to be imgur feature that creates thumbnail version of the avatar with exactly 328x328 pixels (hence perfect fit) however it's borked for long time and won't be fixed (imgur became too big to care), so agree this request is the best we can ask for. – Shadow The Princess Wizard Jun 16 at 7:05
7

I like this idea in principle, but not either of the specific implementations suggested.

I did a bit of research to see about this CSS trick, as I'd never heard of it, and thought it would be best to actually show it at work. I will present some pictures that clearly show what's going on here and what this question is asking for.

The profile page of the user linked to in the question shows this:

profile

But the actual image used is this:

avatar

(You can skip to the bottom of this post if you want to see my suggested display.)


The various ways of handling a picture of a certain dimension when the space allocated to it has different dimensions are shown in this picture (the red square represents what is actually displayed): fit examples

The default is object-fit: fill, which is what we seem to use for our avatars: the image is stretched in both dimensions to fill the space allocated to it.


The examples shown don't clearly represent the difference between object-fit: scale-down and object-fit: contain. With scale-down, the image size is only decreased, so if the space allocated is bigger than the image, it will not increase the size of the image, making appear with space at top and bottom as well as left and right. But with contain, the image is decreased or increased as is appropriate to take up as much up as much of the allocated space as possible.

This difference between these two specific situation is shown in this picture:

increase or decrease


To me, I think the best representation of somebody's avatar is to: (1) not distort it by stretching it in only one dimension, and (2) not crop it to fit so that some of the image is lost. I also think that the best representation of what Stack Exchange wants in terms of its placement is to make it as close to the space allocated to it as possible.

Therefore, my choice would be to use object-fit: contain rather than either of those suggested in the question. If this were used, there would be additional space at the top and bottom of the picture, while it was shrunk to fill the horizontal space without cutting off any details.

resized

  • contain is also fine. I suggested scale-down just in case someone posts a small icon as his profile photo (not sure if that’s even possible). contain would scale it up and make it blurry. I feel like scale-down is the optimal solution, allowing to have small sharp icons and also making sure the image always fits the container. – Robo Robok Jun 15 at 15:14
  • @RoboRobok At the dimensions we're talking about it, it's unlikely anybody will run into this in the first place. However, if they do, I find it even more unlikely that—given the space used for it on the profile page—scaling it up would make it blurry. (Or that if it did at all, the advantage of having it fill the—small—space would be of more visual benefit than any slight blurriness that might be noticeable.) This may be purely a matter of opinion. I agree that scale-down is better than the default of just stretching it. – Jason Bassford Supports Monica Jun 15 at 15:35
  • 1
    It’s obvious that stretching is the worst possible solution. Scaling up or not scaling up is just a matter of approach, both make sense. I opened this issue mostly to just highlight the problem of stretching. I thought it was required to have a square photo in the first place, but it either is not, or validation is faulty as we can see from that sample profile. – Robo Robok Jun 15 at 17:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .