How to add image captions into a post with full-width images?

Photoblogging
1

Hello!

I’d love to add images to my posts with captions, but I’m having trouble figuring it out. I’m not very good with HTML.

Here’s the post I’m using as an example: In the falling light | Alvin Soon

I tried using this code I found online:

<figure><img src="``https://alvinsoon.com/uploads/2025/2014-11-27-oldjapan.jxl``" alt="Kyoto, Japan. November 27, 2014"><figcaption>Kyoto, Japan. November 27, 2014.</figcaption></figure>

But the image then shrinks and is no longer full-width. How can I add a caption and make the image full-width? It would be a nice bonus if the caption could be italicised as well.

Thanks in advance!

2

The default user agent in most browsers has a margin around figures.

You can add:

figure {
  margin: 0;
}

to your CSS or in the above

<figure style="margin: 0;">

3

This works! Thank you!