WP Fluid Images runs when you insert an image into a Post or Page. It removes the fixed width and height attributes from the image tag. If you insert an image from the image uploader, by default, a width and height attribute is inserted into the image tag with fixed pixel values. This plugin prevents this from happening, because this can be problematic if your theme is built using responsive design methods. The plugin also adds a style tag in the header that sets a max-width rule of 100%. This insures that any image in a Post or Page won’t extend past the width of the Post or Page.
If you resize an image in the Visual Editor, a new width and height attribute get added to the image. WP Fluid Images loads a jQuery script that examines the .post, or .page divs for image tags. It calculate the image’s width as a percentage of the .post or .page div, removes the width and height attributes, and adds a style attribute with a width value set to the calculated percentage.
What is the concept of “Fluid Images”?
The idea behind fluid images is that instead of having images that size proportionally and smoothly as your web page’s width increases or decreases. Ethan Marcotte wrote an article on the idea at A List Apart:
You can also learn more at his site: Unstoppable Robot Ninjas. Fluid Images is an important consideration in responsive web design. Which segues to:
What is Responsive Web Design?
Responsive Web Design is the idea of having your site’s design be flexible enough to resize based on the width of the browser window. This allows you to create a single, adjustable design that works regardless of the size of the device. It’s a nice alternative to building separate designs for desktop browsing, tablets, mobile browsers, etc.
You can download WP Fluid Images here.
