如何在Jekyll的_config.yml配置文件中调整头像图片尺寸？

_config.yml里的这段配置仅用于存储头像路径，没法直接在这里设置图片尺寸，得通过修改模板文件或CSS样式实现，下面是几种常用方案：

方案1：直接在模板文件里添加尺寸属性 #

找到首页渲染头像的模板文件（比如_layouts/home.html、_includes/author-bio.html这类，具体取决于你的主题结构），找到输出头像的代码，一般是类似这样：

<img src="{{ site.author.avatar }}" alt="{{ site.author.name }}">

直接给<img>标签加上width和height属性：

<img src="{{ site.author.avatar }}" alt="{{ site.author.name }}" width="150" height="150">

如果想保持图片比例，只设置其中一个属性即可，比如只写width="200"，高度会自动按比例缩放。

方案2：用CSS样式控制尺寸 #

1. 先给头像标签加个自定义类（如果还没有的话），修改模板里的代码：

<img src="{{ site.author.avatar }}" alt="{{ site.author.name }}" class="author-avatar">

2. 打开网站的CSS文件（比如assets/css/main.css），添加对应的样式：

.author-avatar {
  /* 固定尺寸 */
  width: 150px;
  height: 150px;
  /* 或者用最大尺寸限制，避免图片过大 */
  max-width: 200px;
  max-height: 200px;
  /* 可选：让头像变成圆形 */
  border-radius: 50%;
}

要是不知道头像元素的选择器，按F12打开浏览器开发者工具，选中头像就能看到对应的类或标签，直接用它写CSS就行。

方案3：在_config.yml里维护尺寸参数（可选） #

如果想以后改尺寸不用碰模板，可以先在_config.yml里加尺寸配置：

author:
  name   : "name of the author"
  avatar : "/assets/images/avatar_logo.jpg"
  avatar_width: 150
  avatar_height: 150

然后在模板文件里引用这些参数：

<img src="{{ site.author.avatar }}" alt="{{ site.author.name }}" width="{{ site.author.avatar_width }}" height="{{ site.author.avatar_height }}">

这样以后调整尺寸，直接修改_config.yml里的数值就行。

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