• Home
  • Services
    • Websites
    • Mobile Optimized Websites
    • SEO (Search Engine Optimization)
  • Portfolio
  • Blog
  • About
  • Contact
Contact me about your project. Click here!
linkedin
rss
google_plus
email
  • Home
  • Services
    • Websites
    • Mobile Optimized Websites
    • SEO (Search Engine Optimization)
  • Portfolio
  • Blog
  • About
  • Contact

Blog Post

How to quickly add responsive images to WordPress with width:100% CSS set

26 Mar 2014
Comment are off
Eric

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/

About the Author
Eric Hicks is a Freelance Web Developer in Tampa Bay, FL specializing in PHP/MySQL programming, CodeIgniter, and ExpressionEngine, WordPress, Internet Marketing and SEO. Call (813) 418-6833 if you are interested in hiring Eric for your Internet project.

Social Share

  • google-share

Contact

Eric A. Hicks, MBA
Freelance Web Developer
(813) 418-6833
[email protected]
Note: Email is the BEST way to communicate with me!

10736 Doc Brittle St.
New Port Richey, FL 34655

Contact

Eric A. Hicks, MBA
Freelance Web Developer
(813) 418-6833
[email protected]
Note: Email is the BEST way to communicate with me!

10736 Doc Brittle St.
New Port Richey, FL 34655

Recent Posts

  • Delete all messages in your LinkedIn inbox
  • Custom WordPress shortcode to display current year
  • How to quickly add responsive images to WordPress with width:100% CSS set
  • Google Analytics tutorial for business owners
Copyright © Eric A Hicks, LLC