Evan Solomon

Usually when we talk about making something responsive, we mean horizontally. But it’s annoying when tall images overflow a short laptop screen. This resizes those images on the fly to fit the user’s window. Optionally disable it for individual images by adding a <code>do-not-resize</code> class.

Vertically Responsive Images

Resize images on the fly to make sure the whole thing fits into the user's window.

ramseyp

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 near the end of the document that sets a max-width rule of 100%. This helps ensure 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 closest parent div for image tags. It calculate the image’s width as a percentage of the width of that div, removes the width and height attributes, and adds a style attribute with a width value set to the calculated percentage.
An image that is part of a WordPress gallery will have it’s width attribute calculated as a percentage of its parent <code>.gallery-icon</code> element.
If you insert an image with a caption, instead of applying a style attribute with a width as a percentage to the image, the plugin will apply it to the <code>.wp-caption</code> div.

WP Fluid Images

WP Fluid Images replaces the fixed width and height attributes so your images resize in a fluid or responsive design.

Vertically Responsive Images vs WP Fluid Images