XF 1.2 Remove HTML dimensions from avatars in posts

rellek

Well-known member
Hi,

is there a (simple) way to remove width and height attributes from the img tag that displays avatars in posts?
I'd like to have them sized using CSS since I have to use the "l" version because of animated gifs. And old avatars are mostly 60x60, so if there's
<img src="data/..." width="192" height="192" />

and CSS
Code:
img {
    max-width: 96px;
    max-height: 96px;
}

will make all avatars to be displayed with 96x96. If they were smaller, they will be stretched by the browser. So if those html attributes would be away, everything would be fine...

Thanks! :)
 
Try this:

http://xenforo.com/community/resources/avatars-big-tall.1741/

If you are running XenForo 1.2 then you should read towards the end of the discussion thread for code to get it working on the responsive style.
Thanks. Does this width: auto overwrite the dimensions in the img-tag? Then, I could tell the system to use the l-avatar (which is already in use) and to have a max-width (and height). My problem right now is that the html attribute tells the browser that the image is 192x192 and max-width sets it to 96x96. Even if the original image is just 60x60.

As an additional tip to you, if you use imagemagick you can have animated avatars :)
Thanks, but the problem here is more that those avatars are smaller than the pre-defined sizes, so imagemagick would stretch them too (but preserve animation, though). :)
 
Thanks. Does this width: auto overwrite the dimensions in the img-tag? Then, I could tell the system to use the l-avatar (which is already in use) and to have a max-width (and height). My problem right now is that the html attribute tells the browser that the image is 192x192 and max-width sets it to 96x96. Even if the original image is just 60x60.

Yes, using the img-type avatar allows for an 'auto' dimension like in the CSS in those instructions:

Code:
.thread_view .messageList .messageUserInfo a.avatar img,
.thread_view .quickReply .messageUserInfo a.avatar img,
.conversation_view .messageList .messageUserInfo a.avatar img,
.conversation_view .quickReply .messageUserInfo a.avatar img
{
	width: 142px;
	height: auto;
}
 
Top Bottom