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

/* When the user clicks an image in the post content, it is enlarged */
.post-content img[loading="lazy"]:active {
    transform: scale(1.382);
}

/* Make all images in a post display at the same width */
.post-content img[loading="lazy"] {
    width: 100%;
    height: auto;
}

Run hugo --gc to update the blog.