我一直在考虑如何在Wordpress中使用响应图像。我的网站在每篇文章的顶部都有一个固定高度的全宽缩略图。响应图像的内置Wordpress实现假定有一个恒定的纵横比，这是本用例所没有的。

我已经创建了6个图像大小，覆盖3个宽度和2个像素：

add_action( \'after_setup_theme\', \'setup_image_sizes\' );
function setup_image_sizes() {
  $height = 150;
  $width  = 250;
  $gutter = 50;

  add_image_size( \'single-width\', $width, $height, true ); //Single width Thumbnail
  add_image_size( \'single-width-2x\', $width * 2, $height * 2, true ); //Single width Thumbnail
  add_image_size( \'double-width\', 2 * $width + $gutter, $height, true ); //Double width Thumbnail
  add_image_size( \'double-width-2x\', ( 2 * $width + $gutter ) * 2, $height * 2, true ); //Double width Thumbnail
  add_image_size( \'triple-width\', 3 * $width + 2 * $gutter, $height, true ); //Triple width Thumbnail
  add_image_size( \'triple-width-2x\', ( 3 * $width + 2 * $gutter ) * 2, $height * 2, true ); //Triple width Thumbnail
}

这样做之后，我不知道我将如何构建一个<picture> 要素任何帮助和指导都将不胜感激。

// open the picture element
<picture>

// use this image if the width of a screen does not go over 599px
<source srcset="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), \'whatever add_image_size you want to use\', false )[0] ?>" media="(max-width: 599px)">

// call an image
<source srcset="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), \'whatever add_image_size you want to use\', false )[0] ?>">

// fall back for older browsers
<img srcset="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), \'whatever add_image_size you want to use\', false )[0] ?>">

// close the picture element
</picture>