WordPress调用get_the_post_thumbnail_url()时图片放大、CSS异常如何解决？

我通过get_the_post_thumbnail_url() 函数获取图片URL时，图片会被异常放大，但从主题的assets文件夹中获取同图片时显示完全正常。

异常放大的图片效果：

期望的正常图片尺寸效果：

我的实现代码如下：

echo '<div class="col-md-4 mb-3">';
echo '<div class="card blog-post-card">';
echo '<img class="card-img-top" src="'.get_the_post_thumbnail_url(null,'blog-large').'" alt="image">';
echo '<div class="card-body">';
echo '<h5 class="card-title"><a class="theme-link" href="'.get_the_permalink().'">'.get_the_title().'</a></h5>';
echo '<p class="card-text">'.get_the_excerpt().'</p>';
echo '<p class="mb-0"><a class="text-link" href="'.get_the_permalink().'">Read more &rarr;</a></p>';
echo '</div>';
echo '<div class="card-footer">';
echo '<small class="text-muted">'.get_the_date().'</small>';
echo '</div>';
echo '</div>';
echo '</div>';

解决方法 #

1. 确认自定义图片尺寸注册状态
   你调用的blog-large是自定义图片尺寸，需要先在主题的functions.php文件中通过add_image_size方法注册才会生效，示例代码如下：

add_image_size( 'blog-large', 360, 220, true );

参数依次是尺寸别名、宽度、高度、是否硬裁剪。最后一个参数设为true才会按指定尺寸强制裁剪，否则WordPress只会按比例缩放，不会固定尺寸。
注册完成后可以使用缩略图重建工具，将之前上传的图片批量生成对应尺寸的裁剪版本，否则旧上传的图片不存在blog-large尺寸版本，函数会默认返回原图，导致图片过大被拉伸。

2. 替换更稳妥的图片输出方式
   不要手动拼接img标签，直接使用WordPress原生的get_the_post_thumbnail方法输出图片，它会自动生成适配不同设备的srcset、sizes属性，还会自动填充文章标题作为alt文本，兼容性更好，修改后的代码如下：

echo '<div class="col-md-4 mb-3">';
echo '<div class="card blog-post-card">';
// 替换原生方法输出图片
echo get_the_post_thumbnail( null, 'blog-large', [ 'class' => 'card-img-top', 'alt' => get_the_title() ] );
echo '<div class="card-body">';
echo '<h5 class="card-title"><a class="theme-link" href="'.get_the_permalink().'">'.get_the_title().'</a></h5>';
echo '<p class="card-text">'.get_the_excerpt().'</p>';
echo '<p class="mb-0"><a class="text-link" href="'.get_the_permalink().'">Read more &rarr;</a></p>';
echo '</div>';
echo '<div class="card-footer">';
echo '<small class="text-muted">'.get_the_date().'</small>';
echo '</div>';
echo '</div>';
echo '</div>';

3. 增加CSS限制避免图片变形
   可以给卡片图片增加样式约束，强制适配容器尺寸，避免拉伸：

.card-img-top {
  width: 100%;
  max-height: 220px; /* 可根据需求调整数值 */
  object-fit: cover; /* 按比例填充容器，多余部分裁剪 */
}

内容的提问来源于stack exchange，提问作者Kanav Dawra