Wordpress Post featured image responsive issue

Question

I have the following problem with my wordpress site. In my blog section, where a list of all blogposts is shown, my featured images are of bad quality because of the responsive images option Wordpress implements. This is what my code looks like:

    <div class="post-thumb"><a href="http://www.example.com/mypost">
    <img width="300" height="75" src="http://www.example.com/wp-content/uploads/2017/02/img-300x75.jpeg" class="alignleft wp-post-image" alt="" srcset="http://www.example.com/wp-content/uploads/2017/02/img-300x75.jpeg 300w, http://www.example.com/wp-content/uploads/2017/02/img-768x192.jpeg 768w, http://www.example.com/wp-content/uploads/2017/02/img-1024x256.jpeg 1024w, http://www.example.com/wp-content/uploads/2017/02/img.jpeg 1400w" sizes="(max-width: 300px) 100vw, 300px">
    </a></div>

If I change the 'sizes' element in my console and the maximum width to a much higher number than 300px (e.g. 3000px), my image shows in the quality it is supposed to be. But now my site, which is full width, only scales an image of 300px. I currently do not know where to change this element in my theme.

Thanks in advance, Tom

Unknown Unknown · Accepted Answer · 2017-02-25T12:39:09

Hello try display images in full size in your theme:

<?php the_post_thumbnail('full'); ?>

My template always displays images in full resolution.

Or you can try change post thubnail size from Admin Panel and refresh images with plugin again (i dont remember plugin name now).

Style (or min-width: 100%; max-width: 100%;):

<style type="text/css">
.post-thumb img{
    padding: 5px; float: left; width: 100%; height: auto; overflow: hidden; box-sizing: border-box;
}   
</style>

Wordpress Post featured image responsive issue

1 Answers