我真的不明白如何在我的主题中使用WordPress提供的新的响应图像功能。
示例：
在我的主题中，我添加了一个标题图像。因此，我使用customizer中的自定义标题图像或post缩略图：
<figure id="header-image" class="uk-margin-remove">
<?php if ( ( is_single() || ! is_home() ) && has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
???
<?php endif; ?>
</figure>
因此，在第一种情况下，输出如下：
<img src="http://xxx.dev/wp-content/uploads/x.jpg" srcset="http://xxx.dev/wp-content/uploads/x-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/x-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/x-1024x241.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" alt="">
这很好。但是，如果我想通过附件ID显示图像，无论我使用哪个函数，都无法获得预期的输出。
示例：
在上面的代码中，您可以看到“？”。在那个地方，我尝试了一些东西。例如：
<?php echo wp_get_attachment_image( get_custom_header()->attachment_id, \'full\' ); ?>
这只会产生一个大小（请参见大小属性）：
<img src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" class="attachment-full size-full" alt="Delft_IMG_6275" srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" height="451" width="1920">
那么，在主题中显示图像的正确方式是什么，以便输出类似的结果
the_post_thumbnail()?
最合适的回答,由SO网友:Andy Macaulay-Brook 整理而成
在我们交换意见后，我重新阅读了你的问题，并给出了一个非常简单的答案：
看起来它工作得很好。
您担心sizes 属性，但它是srcset 属性，该属性显示所有图像大小：
<img
src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg"
class="attachment-full size-full" alt="Delft_IMG_6275"
srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w"
sizes="(max-width: 1920px) 100vw, 1920px"
height="451" width="1920">
浏览器读取如下属性：
1-查看sizes 属性并查找当前视口宽度的第一个匹配项。在这种情况下，如果视口1920px 宽，然后使用100vw 值，转换为px, 否则使用1920px.
2-查看srcset 属性并选择符合（1）中的值的图像。
在带有全宽窗口的漂亮大屏幕上，浏览器选择sizes 价值1920px. 这会将浏览器指向标记为的图像1920w 在srcset属性中，使用全尺寸图像的URL。
在肖像iPad上，视口位于768px 宽，则在（1）中获得的值将为100vw 此视口的768px. 查看srcset 对于768w 我们获取medium_large 图像大小（WP4.4中新的默认大小，在管理界面中不显示）。
当视口宽度没有精确匹配时，浏览器应选择下一个更大的尺寸。
现在，在某些情况下，您可能需要提供更长的图像列表，您可以使用add_image_size() 在您的主题中。WP将构建srcset 属性，使用与选择显示的图像大小的纵横比匹配的所有图像。
在某些情况下，您还需要定制sizes 属性，您可以过滤该属性，但就您的问题而言，我认为这不是您想要的。
