I normally add style=”width:100%;” manually to most images that I add to WordPress pages, posts, and widgets.  I also strip out all the hard-coded image height and width settings.

So a typical image in one of my websites might look like this…

<img alt="" src="/wp-content/uploads/responsive-image.jpg" style="width:100%;" />

So today I said to myself “there has to be a better way!”.  I don’t like to take the 30 seconds to strip out and add my own code every single time, so I thought if there isn’t already a plugin to do this, then I was going to write a plugin.  So I did a search for “wordpress plugin responsive images 100%” and WP Fluid Images was at the top of the search results.

This plugin does the trick!  Here’s the code it injects when you add an image to a page or post.

<img src="/wp-content/uploads/responsive-image.jpg" alt="" class="alignnone size-full wp-image-156">

The size-full class effectively adds “max-width: 100%;height: auto;” CSS styling to the image.

I’m not super happy about the image not being properly ended ( “/>” vs just “>”) but what can you do?

Check out this plugin, it’s going to be permanently in my list of plugins that I install into every website!

http://wordpress.org/plugins/wp-fluid-images/