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.

how does she scale

Drag the window narrower – how does she scale?

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.

8 Comments

  1. Yair on March 2, 2017 at 6:46 pm

    Well, for me what did the trick is


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

    Thanks

  2. Rainer B. on January 16, 2017 at 2:42 pm

    Thank you for these codes. I use Genesis framework. My child theme is LifeStyle Pro, and there isn’t any header.php yet. Where else can I insert the script for header.php? In functions.php?
    thank you for your answer!

    As website I gave the URL of the test-site.

    kind regards
    Rainer

  3. hadrian on September 13, 2016 at 3:07 pm

    thank you so much, mate!

  4. XERACX on February 23, 2016 at 8:53 am

    THANKS SO MUCH

  5. homa on December 6, 2015 at 3:27 pm

    tanks, very much!!

  6. Tor Ivan Boine on October 2, 2015 at 12:41 pm

    thanks.

    img {
    max-width:100%;}

    did the trick for me. I put it in the child template.
    Could the problem be is lazy responsive coding of the theme?

  7. Gert Hardeman on August 30, 2015 at 7:44 pm

    But how in html?

    • Dean on October 9, 2015 at 4:30 am

      Use CSS, as described.

Leave a Comment





%d bloggers like this: