如何更改帖子缩略图的图像宽度/高度属性？答案

【问题标题】：How to change the image width / height attribute of a post thumbnail?如何更改帖子缩略图的图像宽度/高度属性？
【发布时间】：2015-02-10 08:37:26
【问题描述】：

我正在尝试更改单个帖子缩略图的图像宽度和高度属性。这是 WordPress 生成的 HTML 标记输出。

<img width="1024" height="600" src="http://www.sample.com/wp-content/uploads/2015/02/image.jpg" alt="My site" width="100%" height="" />

我希望这个width="1024" height="600" 变成这样width="100%" height=""，这样图像就已经在所有不同的窗口屏幕中响应，而无需执行CSS 或JQUERY 代码。

我下面的代码不能正常工作。输出是src 属性之后的另一个width="100%" height="" />，而不是替换src 属性之前的width="1024" height="600"。

我期望的图像标签输出是这样的

<img width="100%" src="http://www.sample.com/wp-content/uploads/2015/02/image.jpg" alt="My site" />

PHP 代码：

$attr = array( 
    'class'     => '',
    'alt'       => 'My site'
    'width'     =>  '100%',
    'height'    =>  ''
);
get_the_post_thumbnail( $post->ID, 'full', $attr )

我有另一种方法来解决这个问题。下面的代码是我的第二个选择，但我也想知道这个图像/高度属性是如何动态变化的。

$img_url= wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );

<img width="100%" src="<?php echo $img_url[0]; ?>" alt="My site" />

非常感谢任何帮助。

【问题讨论】：

您是否尝试过使用 CSS 来解决此问题？添加规则，例如：.single .entry img {width: 100%; height: auto;} 过去曾为我工作，作为一种覆盖 Wordpress 分配给缩略图的宽度/高度的方法。（当然，我猜是 .single .entry 选择器——你必须使用任何一个选择器来定位你的单个帖子图像。
是的，我可以这样做，但我希望动态修复它。不使用 CSS 或 JQUERY
你试过了吗： if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' ); echo ''; }
您确定要将 1600 像素宽的图像作为“缩略图”放入吗？实际创建大小合适的缩略图不是更好吗？
是的！这是我的第二个选择，但我希望它解决一些问题，比如替换数组的宽度和高度属性。

标签： php jquery html css wordpress

【解决方案1】：

您可以找到缩略图网址并为其提供 css

<?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>
<img src="<?php echo $url; ?>" class="img_thumb"/>

【讨论】：

【解决方案2】：

上传新图片时创建自定义图片尺寸：

if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'thumb-400', 400, 350 ); //cropped 400 pixels wide, max 350px height
    add_image_size( 'center', 550, 367, array( 'center', 'center' ) ); //center crop
    add_image_size( 'default-thumb', 600 ); // 600 pixels wide (and unlimited height)
}

在您的模板中：

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumb-400'); 
$t = $thumb[0];

html

<img class="thumbnail" src="<?php echo $t ?>" />

【讨论】：