我正在努力为Wordpress中的响应性背景图像制定一个解决方案，以便在我客户的网站上使用。

这就是我得到的：

1） 我创建了一些自定义缩略图大小：

function custom_image_sizes() {
    add_image_size ( \'small_regular\', 832, 800, true );
    add_image_size ( \'small_retina\', 1664, 1600, true );
    add_image_size ( \'big_regular\', 1728, 800, true );
    add_image_size ( \'big_retina\', 3456, 1600, true );
}
add_action( \'after_setup_theme\', \'custom_image_sizes\' );

2）现在，我尝试在模板中使用它们进行内联媒体查询，如下所示：

$small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 832, 800, ) );
$big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 1728, 800, ) );
echo "<style type=\'text/css\'>";
echo ".entry-featured-image { background-image: url(\'{$big_regular[0]}\'); }";
echo "@media screen and (max-width:48em) { .entry-featured-image { background-image: url(\'{$small_regular[0]}.\'); } }";
echo "</style>";

关键是：内联媒体查询可以正常工作，但无论发生什么情况，它们总是显示相同的图像大小（832x800）。

我该如何解决这个问题？

$small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), \'small_regular\' );
$big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), \'big_regular\' );
echo "<style type=\'text/css\'>";
echo ".entry-featured-image { background-image: url(\'" . $big_regular[0] . "\'); }";
echo "@media screen and (max-width:48em) { .entry-featured-image { background-image: url(\'" . $small_regular[0] . "\'); } }";
echo "</style>";