Responsive WordPress thumbnails

1 Views

I can easily make images within a post responsive, but am have an issue getting custom post type thumbs to do the same b/c WP automatically inserts a width and height. I am looking for a way to at least override these default widths/heights on them. Anyone happen to have a solution for this?

Thanks in Advance!
– j

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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.

  2. 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')

  3. <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.