CODEWITHSUNDEEP
wordpressresponsive-design
user1113662
user1113662

Reputation: 31

Responsive WordPress thumbnails

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

Upvotes: 3

Views: 3205

Answers (3)

Yuri Zolotarev
Yuri Zolotarev

Reputation: 731

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

Upvotes: -1

kremalicious
kremalicious

Reputation: 1371

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.

Upvotes: 4

Indranil
Indranil

Reputation: 2471

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

Upvotes: 1

Related Questions