Responsively Removing Width and Height Attributes on Images and wp-caption on WordPress

If you are looking to go responsive for images on your site and want a theme that responds to various devices such as tablets and mobiles there are a couple of issues to sort out with existing hard coded images that have hard coded inline style width and height attributes. In WordPress not only do you need to removed these inline styles of images but also need to address the div ID attachment/wp-caption class that sets an inline width style attribute to the parent div container of the image each time you set a caption.

Best CSS Mark Up for scaling images

First up is that the best way to scale images responsively is by optimising the image at the larger scale required such as your intended desktop size and then letting it scale down for table and mobile devices. So set the largest size you need and just use the max-width property set to 100%

img {
max-width:100%;}

This way the image will only scale as wide as how many pixels are actually in it, not beyond that width, but will scale down to fit smaller container areas.

Removing Existing Inline Styling for Width and Height Attributes on Images

This can be achieved with some javascript, I couldn’t find a way to do this via a mass mysql method, so here is a great script , put it in the header.php of your theme.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
  $('img').each(function(){
  $(this).removeAttr('width')
  $(this).removeAttr('height');
 });
});
</script>

This can be used to target specific images instead of all images by using a CSS selector, like so:

 $('.myspecificclass img').each(function()

So now you can remove all inline styling attributes and target images with the max-width property. But WordPress can also throw in some additional inline styling of the surrounding div of the image which has a class of wp-caption and has an inline width style, this inline style prevents the image from scaling. This is only added if you have used captions in your pics.

Removing the wp-caption Inline Width Style on Images

I found 2 solutions to this problem – one is a php function that just takes out the wp-caption inline style across the board and the other is a CSS solution.

php script

You need to add this php function to your function.php file in your theme.

add_shortcode( 'wp_caption', 'fixed_img_caption_shortcode' );
add_shortcode( 'caption', 'fixed_img_caption_shortcode' );

function fixed_img_caption_shortcode($attr, $content = null) {
	 if ( ! isset( $attr['caption'] ) ) {
		 if ( preg_match( '#((?:<a [^>]+>s*)?<img [^>]+>(?:s*</a>)?)(.*)#is', $content, $matches ) ) {
		   $content = $matches[1];
		   $attr['caption'] = trim( $matches[2] );
		 }
	 }
	 $output = apply_filters( 'img_caption_shortcode', '', $attr, $content );
		 if ( $output != '' )
		   return $output;
	 extract( shortcode_atts(array(
	  'id'      => '',
	  'align'   => 'alignnone',
	  'width'   => '',
	  'caption' => ''
	 ), $attr));
	 if ( 1 > (int) $width || empty($caption) )
	  return $content;
	 if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
	  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
	 . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

css method

div.wp-caption{
 max-width: 100%;
}

Because there is no ‘height’ attribute, the max-width attribute overrides the inline width pixel dimension when the viewport is smaller and the images scale to fit.