Website Design Resources

Responsive images in WordPress

Date posted: 15 October 2014
Posted in: Website development
Tags: , ,

By default, WordPress adds width and height attributes to images. This is great unless you happen to be building a responsive website and want the images to scale according to the web browser’s screen size.

A simple fix is to add the following CSS to your style.css file:

img.alignnone, img.alignleft, img.alignright, img.aligncenter{
 max-width: XXpx !important;
 width: 100% !important;
 height: auto !important;
 }

where XXpx is the maximum width of the column.

This will overwrite the attributes and ensure the images are responsive.