By default all images used inside your posts, pages and other post types in WordPress has some width in pixels and hence they are not responsive at all. In this tutorial we will show you how you can easily make your images fluid (responsive) so that they can be viewed on small screen devices too.
All you need is to install and activate WP Fluid Images and that’s all. It automatically gives percentage width and height to all of your site images and removes the fixed width and height attributes.
How It Works ? This plugin loads jQuery script which examines .post or .page divs for the image tags then it calculates the image’s width as percentage of the .post or .page div and removes the width and height attributes by adding a style attribute with width set to the calculated percentage.
Alternative Method:
You Can Also Override the image widths in your theme by overriding style rules and adding a more specific style in theme’s style.css file.
Style added to wp_footer contains following declaration:
img { max-width:100%; height:auto; }
In your theme’s style sheet, add a declaration that has a parent element’s tag, class, ID, or some combination, along with the img tag and your desired width and height.
For Example:
body img { max-width: 90%; }
#content img { max-width: 99%; }