I'm trying to embed images of my site into README.MD, and I want each image to be on its own line. But for images that aren't very wide, it's showing them on the same line. And it also wraps all text around the images that aren't wide enough to fill a line.

I've tried adding <br /> tags, adding display="block" to the <a> tag and adding two spaces at the end of the preceding line. Nothing is working.

Surely there's a way to do this, right?

CodePudding user response：

Image on its own line

Add two spaces at the end of the paragraph before and at the end of the image syntax to place the image on its own line (see hard line break):

Lorem ipsum dolor  
![alt text](/path/to/image.png)  
Donec vulputate neque ...

^{^ Note the two spaces at the end of line 1 and line 2 in the snippet above.}

This is rendered as follows (simplified):

<p>Lorem ipsum dolor<br>
<img src="/path/to/image.png" alt="alt text" style="max-width: 100%;"><br>
Donec vulputate neque ...</p>

Image in its own paragraph

Leave an empty line before and after the image to place it on its own paragraph:

Lorem ipsum dolor

![alt text](/path/to/image.png)

Donec vulputate neque ...

This is rendered as follows (simplified):

<p>Lorem ipsum dolor</p>
<p><img src="/path/to/image.png" alt="alt text" style="max-width: 100%;"></p>
<p>Donec vulputate neque ...</p>