Hugo图片大小自适应

Hugo中插入图片时不会自适应图片大小，图片尺寸不统一会影响内容可读性，本文介绍图片大小自适应的配置。

步骤

编辑assets/css/extended/blank.css，如果文件不存在执行以下指令复制一个：

1

cp themes/PaperMod/assets/css/extended/blank.css assets/css/extended/blank.css

添加如下css代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* 当用户点击文章内容中的图片时，图片会被放大 */
.post-content img[loading="lazy"]:active {
    transform: scale(1.382);
}

/* 使文章中的图片在页面上显示时都具有相同的宽度 */
.post-content img[loading="lazy"] {
    width: 100%;
    height: auto;
}

执行hugo --gc更新博客即可。