Responsive Images in WordPress

WordPress responsive images scale to fit whatever device you are using to view your website. Responsive design is the new buzzword in town, and rightly so. It is important that our websites are clearly laid out and easy to read no matter what device or screen size the viewer uses. For those that don’t already know, responsive web design means that we use CSS to present a different view of our website content to those who are using mobile devices, tablets etc. We use CSS media queries to detect their viewing size and restructure our content based on that information.

WordPress Responsive Images

Anyhow, here is a simple trick to get your images to scale perfectly in your WordPress website. First lets understand how we want our images to behave in our wordpress site.

  • Upload our images as usual using the WordPress admin media/image uploader
  • Display the images at the chosen size
  • If the image is larger than the given device viewing area (on mobiles this is about 320px) then we must rescale the image to fit neatly into the viewing area
  • Image width must be no more than 100%
  • Image height must scale in relation to image width
Wordpress Responsive Image - Doesn't Scale Yet

Wordpress Responsive Image - Not Implemented

Wordpress responsive image - Scales

Wordpress Responsive Image - Scales Perfectly

So how can get WordPress responsive images? Quite simply actually.

In your CSS stylesheet add or change a rule for the img element as follows:

img {
max-width: 100%;
height: auto;
}

This will ensure that your image always scales down to 100% of the available width. The auto value for height ensures a nice relative scale of height to width. If the image that has been added using the WordPress admin is smaller than the available space it will not be scaled.

Of course IE8 has a problem with this so there is one final rule that should be added (Thanks to Web Designer Wall for this).

width: auto; /* ie8 */

This solves any issues with WordPress responsive image widths in IE8.

The complete CSS rule is:

img { max-width: 100%; height: auto;  width: auto; /* ie8 */ }

 

Get Started - Contact Us

Get in touch to discuss your website or ecommerce design.

Please enter as much information as possible about your website requirements so that we can provide an accurate estimate.

[contact-form-7 id="2336" title="Contact"]
Privacy Policy | Cookie Policy