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!
