Removing Image and Caption Dimension Attributes

Question

This question is an offshoot from the this discussion on removing dimension attributes from images. The solution code provided on that thread works very well except that it has the unfortunate side effect that any [caption] shortcodes are striped from the image.

After several hours of digging through the core code, I found the cause of this. The wpeditimage TinyMCE plugin that's responsible for adding the [caption] shortcode checks for width attributes in the shortcode and the img tag. If it doesn't find them, it simply remove the caption. Since, this is done 'on the fly' with javascript in the TinyMCE editor, I can't think of any type of WordPress filter that would address this issue. I would be very happy to be proven wrong however. :)

As a final note, my temporary solution has been to use the following jQuery to strip all of the offending tags client side. This, in conjunction with a filter on img_caption_shortcode to prevent a width style from being used there, seems to do the job. It's not pretty, but it's a band-aid for now. Anyone have a better idea?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

Answer 1

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 :-)