WordPress中的自适应图像-如何选择合适的尺寸？

问题描述

我一直在阅读一些有关如何实现WP响应图像（srcset，大小等）的教程。我将响应式图像添加到了没有这种功能的主题（旧主题）。

现在在前端呈现的html很好，但是我在代码中犯了一些错误，因为浏览器始终显示宽度为768px的图像。

以下是暂存here的缩略图以进行测试的代码：

    $attachment_id = get_post_thumbnail_id( $post_id );
            $image_large_src = wp_get_attachment_image_src( $attachment_id,'large' );
    
            echo '<a href="' . $post_href . '" title="' . get_the_title() . '"> 
<img class="featured-thumbnail thumbnail large" src="' . $image_large_src[0] . '"  srcset="' . wp_get_attachment_image_srcset( $attachment_id,'non-cropped-extra-large' ) . '"  sizes="(min-width: 840px) 768px,(min-width: 700px) 300px,100vw"  alt="' . get_post_meta( $attachment_id,'_wp_attachment_image_alt',true) . '"></a>';

在这里，我希望浏览器的宽度在700像素到840像素之间时，将显示300像素的图像。但是，它始终显示768像素的宽度。

以上代码仅用于测试，无法正常工作，我想了解自己做错了什么。

最终目标是让浏览器选择：

浏览器宽度大于1200px的大图像，不刷新图像
浏览器宽度> 1000像素 620像素
470px图片> 470px
用于浏览器宽度

问题：wordpress实际上并没有生成所有这些图像尺寸。我必须添加一个插件才能重新创建它们。

然后我想我必须使用类似的功能覆盖默认大小：

function make_responsive_image_sizes_content_image_sizes($sizes,$size) {
            return '(max-width: 1200px) 620px,(max-width: 1000px ) 470px,(max-width: 470px) 300px ';
        }
    add_filter('wp_calculate_image_sizes','make_responsive_image_sizes_content_image_sizes',10,2);

但是，不确定此函数是否编写正确，是否可以帮助我获得所需的内容。在我重新创建所有新缩略图之前，请创建一个函数，以便自动为每张新上传的图像生成新尺寸，我想在以下方面向您寻求帮助：

了解为什么它在我的实时站点的测试示例中不起作用
修复该函数以覆盖wp默认大小以防需要修复的情况

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

responsive-images wordpress wordpress