Remove IMG height and width with jQuery

WordPress automatically adds inline width and height when you insert images into your Pages or Posts. This can cause layout problems, especially in IE, if you use CSS to change the dimensions of your images. For instance, max-width: 100px; height: auto; will not work in some browsers, because they resepect the inline height over the CSS.

The sollutions is simple: Remove the width and height attributes with jQuery. The following code between <head> and </head> will do the job:

<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>

Note that this code will remove width and height on all images. You can use class or ID selectors if you just want to remove it on some, say in the sidebar: $('#sidebar img').each(function(){

11 thoughts on “Remove IMG height and width with jQuery”

Grant July 8, 2010 at 20:54

You are a life saver! I’ve spent two days working on this trying to figure out why this wouldn’t work.

Thanks!

Reply ↓

ray March 21, 2011 at 17:05

how to wordpress automatic width height remove.

Fantastic!

Reply ↓

Waffler May 17, 2011 at 17:07

Brilliant! Just what I wanted!

Reply ↓

Nancy Johnson June 20, 2011 at 14:26

Hi,

I think this is a great idea. I couldn’t get it to work in IE8 however, worked in IE 7 and all other browsers…

I tried removing your jquery core, because I have a plugin that uses a jquery core. This too worked in all browsers except IE8

There may have been a conflict with this plugin…

http://wordpress.org/extend/plugins/wordpress-tabs-slides/installation/
After I added the jquery to the header below wphead, the tabbed plugin sometimes didn’t display in IE8.. however when I moved your jquery/javascript to display before WPhead in header.php, it fixed this issue, however it still didn’t work and the images were distorted.

I much prefer to control the widths of images in the CSS and I generally do not use the height element.

Thanks

Nancy Johnson

Reply ↓

David Murphy August 1, 2011 at 15:33

said previously said, you’re a lifesaver, cheers!

Reply ↓

David Radovanovic March 13, 2012 at 14:22

Thanks for the script! Is there any advantage (i.e. portability) to using a WordPress filter in functions.php as to the jquery fix you suggested? Thanks for your insight.

Reply ↓

James March 20, 2012 at 15:58

No need for the each. This will work as well.

$(‘img’).removeAttr(‘width’).removeAttr(‘height’);

Reply ↓

Kevin April 27, 2012 at 13:19

As of jquery version 1.7, it can be even a space-separated list of attributes. So:

$(‘img’).removeAttr(‘width height’);

does the job perfectly.

Reply ↓