是否有人知道如何调整所服务图像的大小，以便图像具有内容容器宽度所决定的宽度。我的意思不是通过100%宽度的css调整图像大小，而是调整图像本身的实际尺寸和大小。
例如：文章中的图像，其尺寸为400px × 300px. 但在概述中，我只需要200px × 150px. 但我不想编辑我的主题的每一部分，因为有很多不同的大小。是否有可能自动工作？
如何根据容器宽度自动调整图像大小服务器端/无css
3 个回复
SO网友:kaiser
由于经常需要这样的东西，我编写了一个名为"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?
hwmarkup 到true/yes/1/on 它可以消除img-HTML标记width/height-属性，因此浏览器将自动将其调整为容器宽度。您还可以进一步扩展该类：<?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\' );
SO网友:Mark Kaplun
通常情况下，PHP代码无法知道您在CSS中使用的图像大小，因为PHP首先在服务器上执行，然后才在浏览器中执行CSS。
唯一可行的方法是在CSS中指定所有图像大小，但不提供任何图像，并且仅通过data-xxxxxx属性引用其src。页面加载后，您运行一些JS，为每个图像检查其CSS定义的高度和宽度，并将img的src设置为url，该url将以所需的维度动态生成图像。
这种方法最大的缺点是，图像只有在页面加载完成后才开始加载，而不是并行加载，并且阻止JS的人根本看不到图像。
如果图像的比例与您的问题中的比例相同，您最好使用较大的图像，并将缩放留给浏览器。
SO网友:sam
我想你只是想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\');
结束