How to Resize Images in Jekyll Markdown

3/19/2021

How To

To resize an image in Jekyll Markdown without needing to embed HTML in your markdown document:

1. Add Your Image in the Normal Markdown Style

<!-- Markdown -->
![My Image](/path/to/image.png)

2. Place {:} Immediately After the Regular Syntax

<!-- Markdown -->
![My Image](/path/to/image.png){:}

3. Size Details Go in the Curly Braces, After the :

With a single dimension:

<!-- Markdown -->
![My Image](/path/to/image.png){:width="100%"}

Or with both dimensions:

<!-- Markdown -->
![My Image](/path/to/image.png){:height="700px" width="400px"}

Tested On

Sources

  1. https://dev-notes.eu/2016/01/images-in-kramdown-jekyll/#comment-3298552281
    • Special thanks to Rohit Tahiliani. His brief comment is what helped me figure out how to do this.

Like This?

for More in the Future

with Comments / Questions / Suggestions