by Colin

Responsive Web Design Tip: Remove Height & Width from Images in WordPress

Whenever we build a custom WordPress website and need to make it responsive, we remove the height and width from images inserted into the post content so that they’ll play nicely in a responsive layout.

1
2
3
4
5
6
7
8
// Remove height/width attributes on images so they can be responsive
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
 
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

This is just one of the many customizations we make to the WordPress system to get it ready for a fully responsive web design experience.