我正在使用ACF 输出一些图像。一个图像字段适合我的网站的全宽（1024px），第二个图像字段是全宽（328px）的三分之一。

ACF目前不支持img srcset，因此我通过函数使用以下帮助程序。php文件：

function responsive_image($image_id,$image_size,$max_width){

    // check the image ID is not blank
    if($image_id != \'\') {

        // set the default src image size
        $image_src = wp_get_attachment_image_url( $image_id, $image_size );

        // set the srcset with various image sizes
        $image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );

        // generate the markup for the responsive image
        echo \'src="\'.esc_url($image_src).\'" srcset="\'.esc_attr($image_srcset).\'" sizes="(max-width: \'.$max_width.\') 100vw, \'.$max_width.\'"\';

    }
}

然后，我在我的主题中输出图像，如下所示：

<!-- Full width image -->
<img <?php responsive_image(get_field( \'full_img\' ), \'full\', \'1024px\'); ?> >

<!-- Third width image -->
<img <?php responsive_image(get_field( \'third_img\' ), \'square\', \'540px\'); ?> >

第三幅宽度图像设置为540px，因为这是我的移动视图的全宽。

前端的全宽图像输出以下内容：

<img 
    src="full-1024x450.jpg"
    srcset="full-1024x450.jpg 1024w,
            full-768x338.jpg 768w" 
    sizes="(max-width: 1024px) 100vw, 1024px"
>

前端上的第三个宽度图像输出以下内容：

<img 
    src="third-540x540.jpg"
    srcset="third-540x540.jpg 540w,
            third-150x150.jpg 150w,
            third-300x300.jpg 300w,
            third-768x768.jpg 768w,
            third-1024x1024.jpg 1024w, 
            third.jpg 1080w" 
    sizes="(max-width: 540px) 100vw, 540px"
>

这里是我的主题的图像大小通过功能。php：

add_image_size( \'full\', 1024, 450, true ); // Upload @ 2048px by 900px for HD
add_image_size( \'square\', 540, 540, true ); // Upload @ 1080px by 1080px for HD
add_image_size( \'tall\', 328, 677, true ); // Upload @ 656px by 1354px for HD

我真正想理解的是，为什么我的全幅图像只输出3种大小的图像。图像大小已正确调整，并显示在uploads目录中。对于DPR为2或以上的屏幕，这是一个问题。

我尝试通过设置>媒体增加最大图像，但这没有帮助。

有什么想法吗？

add_filter( \'max_srcset_image_width\', \'max_srcset_image_width\', 10 , 2 );
function max_srcset_image_width() {
    return 2048;
}