You have code in your CSS to make images responsive, which is overriding the width and height set in the image tags. You can either find and remove this:
img {
height: auto;
width: auto;
}
or you could find .comment .avatar in your CSS and add a width and height there:
.comment .avatar {
width: 48px;
height: 48px;
}
Thanks Bangbay. I tried adding the width and height code you sent, but it did not change anything.
So I searched for the image responsive code and this is what I have:
img {
height: auto;
width: auto; /* IE8 */
}
I’m not sure what the “/*IE8 */ refers to? Also, if I remove this, will it affect other images on the blog? Thanks!
The /* IE8 */ is just a comment explaining the CSS is there for IE8. You can try the code I suggested again, but this time add !important:
.comment .avatar {
width: 48px !important;
height: 48px !important;
}
Unfortunately this still didn’t work. If I disable the plugin, the avatars are all sized correctly (but then they only appear as grey boxes–Mystery Man style–with no photos appearing).
Do you think there is a conflict between the plugin and my theme?
Thanks again.
I actually don’t see in your CSS that you’ve added those lines that I suggested. If you’re using a caching plugin, you would need to clear your cache. As for why Gravatar images are sized correctly, this is something that I addressed in another topic:
When you use Gravatar, if you ask for a 16×16 image, you’ll get an image exactly that size. If it’s a local avatar, as with any image in your Media Library, you’ll get the image closest to the size you want sized down with HTML width and height attributes. CSS overrides those attributes so that’s why you’re seeing the images in their true sizes. You either need to remove the width: auto or set CSS widths for specific images.
