Reply
cancel
Showing results for 
Search instead for 
Did you mean: 
Reply

Profile Pictures

Community Manager
Lena E Community Manager Member Since: Apr 7, 2015
11 of 19

Although we currently do not have any plans to change the shape of our profile images to a square ( or hexagon Smiley Sad ), we will continue working to improve the way current round pictures look.

 

-Lena

Untitled
Community Guru
Stephen B Member Since: Dec 4, 2012
12 of 19

Just a suggestion - you could do that by giving them four corners...

Ace Contributor
Ray C Member Since: Apr 10, 2009
13 of 19

Interestingly, mine is NOT distorted. The system must simply squish the photo into a cropped square and mine happens to already be square.

Community Guru
Santiago G Member Since: Mar 10, 2015
14 of 19

How about a WWE "squared circle" ?!!

 

Or how about a square with rounded edges?!!

 

 

What? No one likes triangles these days?

 

Community Guru
Cristian-Adrian F Member Since: May 6, 2015
15 of 19

For the developers watching over this thread: object-fit or -o-object-fit css property would scale the image nicely to the circle, without stretching. Try object-fit: none OR object-fit: contain with squared margins to achieve a better result. I still prefer object-fit: none, because it seems to have a better effect. Yes, it's that easy.

 

// Edit: it seems that my console went mad. The correct way is to have them squared with object-fit: contain, OR object-fit: none, but limiting the size of the image to fit in correctly. Setting object-fit: none and height: 100% + width: auto, seems to partially and correctly display my picture, but not stretched at all.

 

 

Community Guru
Preston H Member Since: Nov 24, 2014
16 of 19

In all honesty, this is kind of a silly discussion. I'm not going to make more or less money on Upwork based on whether my photo is presented in a circle or square.

 

So I don't much care what happens with this.

 

Lena's a good sport for explaining the situation and putting up with our posts.

 

For the sake of balance, I consulted media consultant Huey Lewis, who said (and I quote):

 

They tell me that it's good for me, but I don't even care
I know that it's crazy
I know that it's nowhere
But there is no denying that
It's hip to be square
It's hip to be square
It's hip to be square
So hip to be square
 
Community Guru
Cristian-Adrian F Member Since: May 6, 2015
17 of 19

"I'm not going to make more or less money on Upwork based on whether my photo is presented in a circle or square.

 

I agree, this should take part of Coffee Break, but anyway doesn't matter at all as it's a thin line between going offtopic and keeping a serious discussion.

 

I would rephrase you last line, Preston: "Heaps to be square."

Community Guru
Nichola L Member Since: Mar 13, 2015
18 of 19

It's even hipper to be a square peg in a round hole - I don't care as my pic. doesn't even show in the round frame. Could be that my head is too big!

Community Guru
Cristian-Adrian F Member Since: May 6, 2015
19 of 19

@Cristian-Adrian F wrote:

For the developers watching over this thread: object-fit or -o-object-fit css property would scale the image nicely to the circle, without stretching. Try object-fit: none OR object-fit: contain with squared margins to achieve a better result. I still prefer object-fit: none, because it seems to have a better effect. Yes, it's that easy.

 

// Edit: it seems that my console went mad. The correct way is to have them squared with object-fit: contain, OR object-fit: none, but limiting the size of the image to fit in correctly. Setting object-fit: none and height: 100% + width: auto, seems to partially and correctly display my picture, but not stretched at all.

 

 


Last edit: for the sake of styling, adding just object-fit: cover to the profile container element, will display it unconstrained. I believe that's the easiest fix to achieve. Tested in both Firebug and Chrome console. This is to end up the discussion on why our pictures look distorted.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

Spoiler
cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

 

TOP SOLUTION AUTHORS
TOP KUDOED MEMBERS