由于经常需要这样的东西，我编写了一个名为"Dynamic Image Resize". 它基本上是一个插件，但由于它是一个文件方法，所以可以作为mu插件或主题包含使用，没有问题。它的主要目的是根据需要将单个图像调整为给定的高度/宽度。

以下是“Template Tag”/函数和shortcode采用的参数：

src      // ID or path
height   // New/resized height
width    // The resized width
classes  // custom classes for CSS targeting 
hwmarkup // Do you want the height="ABpx" width="ABpx" on the image tag?

<?php
defined( \'ABSPATH\' ) OR exit;
/**
 * Plugin Name: (#120987) Resize Image to Container Width
 * Author:      Franz Josef Kaiser
 * Author URI:  http://unserkaiser.com
 * Needs @link https://github.com/franz-josef-kaiser/Dynamic-Image-Resize
 */

class wpse120987ResizeImgToContainerWidth extends oxoDynamicImageResize
{
    /**
     * Set the Attributes
     * @param $atts
     */
    public function setAttributes( $atts )
    {
        $this->atts = wp_parse_args( $atts, array(
            \'width\' => $GLOBALS[\'content_width\']
        ) );
    }
}

function dynamic_image_resize_extd( $atts )
{
    return new wpse120987ResizeImgToContainerWidth( $atts );
}

add_shortcode( \'dynamic_image\', \'dynamic_image_resize_extd\' );

通常情况下，PHP代码无法知道您在CSS中使用的图像大小，因为PHP首先在服务器上执行，然后才在浏览器中执行CSS。

唯一可行的方法是在CSS中指定所有图像大小，但不提供任何图像，并且仅通过data-xxxxxx属性引用其src。页面加载后，您运行一些JS，为每个图像检查其CSS定义的高度和宽度，并将img的src设置为url，该url将以所需的维度动态生成图像。

这种方法最大的缺点是，图像只有在页面加载完成后才开始加载，而不是并行加载，并且阻止JS的人根本看不到图像。

如果图像的比例与您的问题中的比例相同，您最好使用较大的图像，并将缩放留给浏览器。

我想你只是想add_image_size() 和the_post_thumbnail(), e、 g。，

add_image_size(\'article\',  400, 300, /*crop=*/ true);
add_image_size(\'overview\', 200, 150, /*crop=*/ true);

the_post_thumbnail(\'article\');