移动设备上的Wordpress响应式帖子图像大小

Question

I have added custom image sizes:

add_image_size( 'post-thumb', 350, 350,true);
add_image_size( 'post-thumb-large', 767, 350,true);
add_image_size( 'post-single', 1200, 520,true);

<?php
    if ( has_post_thumbnail() ) {
       the_post_thumbnail( 'post-thumb' );
    }
?>

<?php
    if ( has_post_thumbnail() ) {
       the_post_thumbnail( 'post-single' );
    }
?>

I want from 400px to 767px all post images (and the single post image) to have the post-thumb-large size and <=400px all post images to have post-thumb size. I think the solution is with srcset attribute, but where and how to add it ?

Answer 1

Please refer to this article on CSS-Tricks: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Your transpiled HTML should look like this(according to the article above):

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">