Twenty-Eleven Theme and Automatic Picture Resizing

Question

I'm running a family wordpress blog: http://www.kjirstiandtom.com

We have a lot of pictures we put up for family. I'm using the twenty-eleven theme, which I love. I did minor css edits to change colors and fonts, but it's otherwise pretty much stock.

Resizing works great... until you get really skinny (e.g. iphone screen). if you resize the browser window, you see that the pictures width starts to resize, but the picture height does not. Any tips?

Thanks!

Answer 1

Here is a quick function to remove the width and height attributes from images which should resolve your issue.

function _remove_img_dimensions_WPA84292($html) {
  $html = preg_replace('/(width|height)=["\']\d*["\']\s?/', "", $html);
    return $html;
}
//for new images
add_filter('post_thumbnail_html', '_remove_img_dimensions_WPA84292', 10);
add_filter( 'image_send_to_editor', '_remove_img_dimensions_WPA84292', 10 );
//for images already inserted into posts
add_filter('the_content', '_remove_img_dimensions_WPA84292', 10);

Answer 2

try to add CSS

.entry-content img { max-width: 100%; height: auto; }

This should set image height automatically and fix your issue.