Removing Image and Caption Dimension Attributes

by

it might not be the exact answer you’re after but i think i just found a pretty good workaround.

Iv’e taken the following code from the twenty-eleven theme CSS (who’s neatly responsive imho):

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

This was enuff to make all the images responsive (at least those embedded in the content…)
Now i have responsive images, but when caption is used i still have the same problem, that occurs because the tinyMCE adds a style attribute to the caption container with the image’s width.
To fix that all i had to do is add this to my CSS:

            .wp-caption { max-width: 100%; }

Done! works fine for me, although it might not work for featured images.

I hope this helps someone 🙂

Leave a Comment