Responsive Images Resizing Images

Question

WordPress's automatic responsive image code is setting the size of certain images larger than it should be. Here is an example:

• On this page: http://healthyhints.wpengine.com/hot-yoga-benefits/, the image of the man lifting a weight is only 557px wide (see native image: http://healthyhints.wpengine.com/wp-content/uploads/2016/03/leanmuscle.jpg).
• The responsive code though is causing it to stretch to 840px wide when the browser is more than 1200px wide:

How can I change the responsive image code being generated from WordPress to change, so the image can never be set to a size larger than it's default size? All images are different dimensions, so I won't be able to hard-code a width into the code.

Any help or direction to resources would be much appreciated.

Answer 1

The issue I was having was with some conflicting code I had in my functions file (see below). I usually use this code to remove width/height attributes from being hard-coded into the element in the content area. Removing these somehow appears to mess up the new responsive image implementation in WordPress though. As soon as I removed this code, the responsive images appear to be working as expected.

Conflicting Code

// Remove Width & Height Attributes from Inserted Images
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}