WordPress will automatically add image dimensions, width and height, to every image you place. While this can be good in many cases, responsive design sometimes works best when no dimensions are set.
To prevent WordPress to add dimensions to your content images and thumbnail you’ll need to add a few lines to your functions.php file in your theme. If your theme doesn’t have a functions.php you can simply create a file named just that.
Simply copy the code below and paste in into functions.php and the following will happen
- Your post thumbnail image tag will not have width and height set.
- Images you send to the editor will be stripped from dimensions as well.
- Already published posts with images will be parsed before presented to have the dimensions of images removed.
1 2 3 4 5 6 7 8 | add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 ); add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 ); function remove_thumbnail_dimensions( $html ) { $html = preg_replace( '/(width|height)="d*"s/', "", $html ); return $html; } |
Now you’re set to continue publishing great responsive stuff in your WordPress site!