Markdown is a simple and a lightweight markup language syntax for formatting content such as documentation and blog articles. But it lacks basic features for image formatting such as sizing and alignment. For this article, I will show you how to use the extended version of Markdown to make your image zoomable. It is a simple trick and doesn't require Javascript.

Most of the extended version of Markdown allow you to include CSS on the image. For example, the code below set the image width to 400 pixels.

![](image.png){ width=400px }

Next, we wrap the resized image to link to the original image. Hence, making it zoomable.

[![](image.png){ width=400px }](image.png)

Here is an example of a zoomable image.

Responsive images

If you are using Bootstrap theme, it is getting even better. By adding img-thumbnail class, Bootstrap will resize your image according to the screen size of your browser. You no longer have to define a fixed size. It is perfect for different size of tablets and smartphones. Here is the Markdown code.

[![](image.png){ .img-thumbnail  }](image.png)

Here is an example of a zoomable image where the thumbnail will resize according to the width of your browser. Go ahead. Resize your browser and see the resize in action.

Reference

• https://michelf.ca/projects/php-markdown/extra/
• https://getbootstrap.com/docs/4.0/content/images/#responsive-images