Bug: User Avatar Height exceeded navi-bar

Question

I uploaded a tall image as my avatar which has a W:H = 16:24. but under my css I found it to be 24:36

And the bottom of this avatar will exceed the navi bar which makes the navi bar look ugly.

I found out that in ./qa-theme/Snow/qa-styles.css, the user avatar will use this line:

 

.qa-logged-in-avatar .qa-avatar-image{

max-width: 100%;

height: auto;

min-width: 24px; /* pull request */

min-height: 24px; /* pull request */

}

 

That's why my avatar will have a minimum width of 24px so that the height will px as well.

 

I tested under this site, the two lines in red was not added (maybe it did not use 1.6.3) and my avatar is okay, everything is okay. But if I use 1.6.3 this two lines will appear and my problem will appear too. Now I removed this two lines temporarily but I'm still confused by this.

Can anybody explain it ? Or, is that a mistake and it should be like this:

.qa-logged-in-avatar .qa-avatar-image{

max-width: 100%;

height: auto;

max-width: 24px; /* pull request */

max-height: 24px; /* pull request */

}

 

Thank you !

 

PS: Is there any plugin for clipping images when uploading user avatar so that all avatars can be in the right size ?

Answer 1

I created that pull request so I guess I'm the one who should explain this (alhtough I already have in the github repo).

Usually, images take some time to load. Each of them will fire a different request (unless using the data attribute and base64 encoding it) so that takes additional time, usually after the page is fully loaded. So the image appears a bit later. As the image appears a bit later the login bar puts the Hello text where the image should be. Once the image is loaded it pushes everything to the right, creating an uncomfortable effect.

The solution I proposed was fixing the image maximum width to the actual maximum width in the CSS, which was 24px. For some reason, for non-square images this limit is not respected and, in your case, the 24px becomes a 36.

So we have to tackle 2 issues:

1. Keep a fixed image size of 24x24 pixels so that things don't move around during page load
2. Make sure the 24x24 limit is respected regardless of the actual image is size being uploaded

It seems the core actually sets those limits. So probably if we let the core handle the image size without making the theme change them I believe we should be fine.

This means remove the whole class:

.qa-logged-in-avatar .qa-avatar-image{

    max-width: 100%;

    height: auto;

    min-width: 24px; /* pull request */

    min-height: 24px; /* pull request */

}

 

I guess playing with the min-* might result in the image getting stretched too but that is up to you how you want it to behave. Please, report back so that I can correct the previous pull request.