Avatar is Squashed
Closed this issue · 10 comments
I added my Gravatar to my profile.
My Gravatar is 100x100, yet it was displayed as 70px by 100px. I don't know how you want to handle this in terms of fixing it.
Problem is here:
#userbox img.avatar {
float: right;
margin: 0 .2em 0 1em;
padding: 0;
max-width: 70px;
}
To fix, I would make it
#userbox img.avatar {
float: right;
margin: 0 .2em 0 1em;
padding: 0;
max-width: 70px;
height: auto;
}
I'm installing Ubuntu on my desktop, so I can't really do a PR for you ATM.
Height: auto is the default CSS behavior so if it doesn't apply to you, make sure you didn't overwrite it somewhere else.
Works perfectly for me and apparently everyone else, on all browsers.
BTW the 70px limit is only in Wilderless and Wireless, iirc.
Using the latest version of Chrome Win7. I see this problem at wedge.org.
Your right about the CSS default behavior, but the problem is the height is declared in the HTML.
I can assure you that I'm not seeing in at wedge.org.
I'm using Opera 20 as my daily browser, it's basically Chromium 32 with all 'default' settings (my Chromium has web platform enabled), so it should be the same results...
I'm not seeing the issue in the forum posts. I see it on avatar selection(in my case the gravatar), and in the sidebar. I'm still going through PC maintenance, so I can't make you a screenshot at the moment. I assure you it's there. I can also see the code, and the code is displaying the avatar how it's told to display it(which is stretching the avatar).
A standard rule of thumb is that if you want to override HTML size with CSS, you must declare your min-width/height or max-width/height AND set the standard height/width to "auto". Otherwise, you end up with stretched images.
Can confirm the issue as well, using a gravatar at wedge.org and the Image (in the sidebar) looks odd..
Okay sorry I didn't notice the CSS was for the sidebar.
Still I'd like to know why it doesn't work with gravatar but with a local upload it works perfectly...
The difference is that the Gravatar has the width & height is declared in the HTML. Where a uploaded avatar has no width & height declared in the HTML. Nor does the Avatar from gallery have a width & height declared in the HTML. So it's only Gravatar you have to worry about.
Yes. I fixed that in the CSS yesterday but I have no idea whether I should
drop width and height from IMG tags generally. There are pros and cons.
Mostly pros.
Really odd that the same HTML isn't used for gravatars in topic pages and the sidebar...