Responsive Image Sizing in Hugo

When you insert images in Hugo, their sizes are not adapted automatically, and inconsistent image sizes can hurt readability. This article explains how to configure responsive image sizing.

Steps

Edit assets/css/extended/blank.css; if the file does not exist, run the following command to copy one in:

1

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

Add the following css code:

 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;
}

Run hugo --gc to update the blog.