How to correct image size in my case?

I built my website using Hugo, and I like it very much. Now the problem is, the image embedded is sized the same as the text, although the text has a bounding box with regard to the web’s width. I want the image to be at most the size of its pixel size (ie. not enlarged even if the surrounding text is wider).

Since the website is written in markdown, I guess I should tweak the theme? Example page with images:

and the code of the site is hosted on GitHub:

Latest code in ‘develop’ branch.


Nice monochrome photos on your site @hzxu. If you’re using markdown to reference the images, they will get put in without any sort of sizing. Usually that means, they will expand to the width of the surrounding div. If you want to control it, you should use a figure shortcode, and set the size.