Search code examples
markdowngithub-flavored-markdown

How to set relative size of images inside a markdown table

I want to make the images inside the markdown table to have the same size. However, the image assets that I have are of different sizes. Thus I want to make a relative image size inside the cell of the table.

How can I make Fig 2 to look like Fig 1 without actually changing the size of image assets?

|     |     |     |     |     |
| :-: | :-: | :-: | :-: | :-: |
|     |     |     |     |     |
| 180 | 182 | 240 | 250 | 250 |
| <img src="assets/textbooks/180.jpg" width="100%"> | <img src="assets/textbooks/182.jpg" width="100%"> | <img src="assets/textbooks/240.jpg" width="100%"> | <img src="assets/textbooks/250-1.jpg" width="100%"> | <img src="assets/textbooks/250-2.jpg" width="100%"> |

Fig 1. Intended

(Same code but the actual image assets have the same size)

enter image description here

Fig 2. Current Output

(What I curretly have)

enter image description here

Solution

  • From https://stackoverflow.com/a/21242579/420802

    With certain Markdown implementations (including Mou and Marked 2 (only macOS)) you can append =WIDTHxHEIGHT after the URL of the graphic file to resize the image. Do not forget the space before the =.

    ![](./pic/pic1_50.png =100x20)

    You can skip the HEIGHT

    ![](./pic/pic1s.png =250x)

    Edit:

    Many markdown parsers allow HTML.

    <img src="drawing.jpg" alt="drawing" width="200" />