步骤1：

定义两种自定义图像大小，例如：

<?php
add_image_size( \'normal-thumbnail\', 400, 300, false ); // Default image size
add_image_size( \'mobile-device-thumbnail\', 200, 150, false ); // Mobile-device image size
?>

实施您选择的方法来确定客户。有几种方法，您使用哪种方法超出了此问题的范围。但是，假设您有一个适合自己的方法，请将结果输出到某个变量，例如$mobile_device = true;

步骤3：

在模板文件中，根据客户端有条件地输出图像。

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( \'mobile-device-thumbnail\' );
} else {
    the_post_thumbnail( \'normal-thumbnail\' );
}
?>

最好的方法是使用流体网格构建WordPress主题，并通过比例缩放功能删除特征图像的宽度和高度值。A.tutorial on Making WordPress images responsive:

Method 1: The CSS

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Removing automatic height and width in WordPress <img> tags

要使图像在WordPress中按比例调整大小，我们必须删除WordPress添加的自动宽度和高度值< img > 标签。

例如，我们必须改变这一点：

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

但是对于WordPress动态显示的图像，例如post缩略图，需要使用函数动态删除宽度和高度。

将以下函数添加到functions.php 文件

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\\/i’, ”,$string );
}

the_post_thumbnail();

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

<小时>

Method 2:

如果你是少数几个没有工作的人之一，你仍然可以使用下面的函数来解决你的图像问题。

将以下函数添加到functions.php 文件

这将从使用检索的图像中删除内联宽度和高度属性the_post_thumbnail(), 并防止将这些属性添加到添加到编辑器的新图像中。

add_filter( \'post_thumbnail_html\', \'remove_thumbnail_dimensions\', 10 );  
add_filter( \'image_send_to_editor\', \'remove_thumbnail_dimensions\', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( \'/(width|height)=\\"\\d*\\"\\s/\', "", $html );     
    return $html; 
}

实现这一点的一种方法是通过用户代理检测，但我也不想使用这种方法，因为用户代理可能被欺骗。

这是一个不错的方法，实际上是行业标准，一个好的WURFL有很高的准确率，我使用和测试的方法总是返回可靠的结果，独立测试（我会费心做的以上）似乎在98%以上的范围内。谁在乎某个蹩脚的机器人是否在欺骗用户代理呢，反正他们不是有理由的。

对于步骤2，我认为这两种方法都可以归结为哪种速度更快，一种是PHP支持的WURFL，另一种是CSS媒体查询。

首先，你必须定义“最佳”。我的定义是：在任何设备或屏幕上以设计师的预期效果渲染图像以与原始图像同等的质量渲染图像，以消耗绝对最少的系统和人力资源（即带宽、CPU、设计师/程序员时间）

以下是我迄今为止看到的方法：

加载图像的全尺寸，并让浏览器将其缩小以适应布局。将图像最大宽度定义为100%，并将其按容器的宽度缩小优点：几乎不需要任何努力就可以实现，跨浏览器兼容，并得到旧浏览器的支持。

缺点：通常下载的数据比需要的要多，然后在客户端上花费CPU周期来缩小它（速度慢）。根据浏览器的缩放算法，最终可能会得到质量非常差的图像。没有艺术指导的可能性，也无法将图像适应视网膜类型的显示。

使用媒体查询读取客户端的属性，并为设计中的不同断点获取多个定制图像中的一个。（建议使用HTMLResponsive 图像扩展和srcset属性标记正在将这种方法烘焙到HTML规范中）

缺点：必须有人花时间处理、裁剪和管理同一图像的多个版本。更多编码：您现在必须以某种方式拼写出图像的每个版本，并为所有所需布局创建媒体查询。对您提供的每个图像重复上述步骤。仅适用于支持CSS3媒体查询或新标记的浏览器。

让后端使用单个源图像动态优化任何屏幕或布局的图像。在我看来，这相当于像HTTP一样将响应图像视为内容协商任务

缺点：必须捕获和传输有关客户端浏览器和屏幕属性的信息。第一次加载图像的速度可能比任何其他方法都慢，因为必须对图像进行处理（通常为以后的请求进行缓存）。