Responsive WordPress thumbnails Responsive WordPress thumbnails wordpress wordpress

Responsive WordPress thumbnails


This is what you want in your CSS:

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

The first declaration makes sure all images won't exceed the width of their containing element. The auto declaration for height ensures all images retain their proportions when scaled down even when they have size attributes in the img element. So in a way this overwrites the size attributes.


You should use WP's wp_get_attachment_image_src() to output the URL of the thumbnail and then proceed with building your own <img/> tag and responsive-ing it.

<img src="<?php $img=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); echo $img[0]; ?>" alt="<?php the_title(); ?>"/>

If you want a specific size, insert this: wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large')


<img src="<?php $img=wp_get_attachment_image_src(                get_post_thumbnail_id($post->ID),large);  echo $img[0]; ?>" alt="<?php the_title(); ?>"                                    style="display:block; width:50%;"/>

That should do it.