如何将网站左上角Logo从40*40px调整为100*100px且不失真？

我之前也碰到过这种WordPress自动生成缩略图坑人的情况——系统或主题直接把你的512x512原图转成了40x40的缩略图，还强制用这个小图当Logo，光改CSS只会拉伸低分辨率图导致模糊。下面是一步步解决的实操方案：

1. 生成100x100的高清缩略图版本 #

首先得让WordPress为你的原图生成符合需求的100x100尺寸缩略图：

• 打开主题的functions.php文件（可以通过WP后台「外观→主题文件编辑器」找到，或用FTP连接服务器修改），添加代码注册自定义缩略图尺寸：

  add_action( 'after_setup_theme', 'custom_logo_size' );
  function custom_logo_size() {
      add_image_size( 'custom-logo-100', 100, 100, true ); // true表示强制裁剪，false则按比例缩放
  }
  

• 保存后，安装并激活「Regenerate Thumbnails」插件（WordPress官方插件库可直接搜到），运行插件重新生成所有图片的缩略图——这一步会让你的512x512原图生成清晰的100x100版本。

2. 修改主题Logo调用逻辑，指向新尺寸 #

接下来要让主题调用新生成的100x100缩略图，而非原来的40x40版本：

• 找到主题的header.php文件，搜索Logo相关代码，通常会是类似这样的结构：

  wp_get_attachment_image( get_theme_mod( 'custom_logo' ), '40x40' );
  

  把里面的'40x40'改成我们刚才注册的'custom-logo-100'，或者直接写array(100, 100)。
• 如果你的主题用的是WordPress自带的自定义Logo功能，也可以在functions.php里修改默认尺寸：

  add_theme_support( 'custom-logo', array(
      'height'      => 100,
      'width'       => 100,
      'flex-height' => false,
      'flex-width'  => false,
  ) );
  

  改完后重新上传一次Logo，系统会自动按新尺寸生成缩略图。

3. 调整CSS确保显示正常 #

最后调整CSS，让Logo正确显示100x100的尺寸，避免被旧样式限制：

• 找到控制Logo的CSS类（比如.custom-logo或你之前修改的类），添加或修改样式：

  .custom-logo {
      width: 100px;
      height: 100px;
      max-width: none; /* 移除可能存在的最大宽度限制 */
      object-fit: contain; /* 如需保持Logo比例不拉伸，保留这个属性 */
  }
  

  尽量不用!important，最好找到主题里原来限制尺寸的样式直接修改，避免样式冲突。

4. 清空缓存生效 #

最后别忘了清空WordPress缓存（如果用了缓存插件）和浏览器缓存，不然可能还是显示旧的小图。

这样操作后，你的Logo就会调用100x100的高清版本，显示清晰且尺寸符合要求啦。

内容的提问来源于stack exchange，提问作者MK-DK