How to modify responsive images in post thumbnails

Question

I have a simple two columns website (one sidebar + one maincoulmn). In the sidebar area I use this code to show some post thumbnails:

<?php the_post_thumbnail('custom-size-small' ,array('class' => 'image', 'title' => strip_tags(get_the_title()), 'itemprop' => 'image')); ?>

My website is responsive and on smaller devices the sidebar drops underneath the main column and when this happens the sidebar becomes as wide as the main column. My 'custom-size-small' is '300px' and you can imagine when the sidebar places under the column, if the viewer is still larger than 300px, the quality of the images suffers. That made me think of this relatively new feature on WP in which srcset is used. But the problem is that the way I want to make use of it is quite the opposite we normally do, is that, bigger images for smaller screens and vice versa.

Can we make WP use the 'custom-size-small' on desktops and the bigger 'custom-size-big' which is twice as big, on smaller screens?

/* I'm not a coder, I can only tamper with the codes. */

That would be great if you could tell me what changes I should make to this?

<?php the_post_thumbnail('custom-size-small' ,array('class' => 'image', 'title' => strip_tags(get_the_title()), 'itemprop' => 'image')); ?>

Answer 1

This is mostly off-topic, but your assumption that srcset is somehow related to going desktop => mobile is just false. the srcset attribute notifies the browser about alternative images and sizes and it is the browser that selects which image to use based on whatever criteria it wants. Therefor there is most likely nothing wrong with your code if it outputs the srcset attribute and you see a non optimal fit of the image because the browser decided it is the best thing to do, for example if it has already an image in its cache it might prefer not to load a new one. Since the srcset attribute is designed to leave control in the hands of the browsers, there is not much you can do about on wordpress side.

Answer 2

You can add to CSS this code:

.image {
    max-width: 100%;
    width: auto;
    height: auto;
}

and it will be responsive!