Search code examples
githubgithub-flavored-markdown

Change size of image in github flavored markdown without using HTML img tag?


I am limited to using []() syntax to render an image (as opposed to <img>) (the reason for this limitation is because it's currently being used as a workaround for a known bug).

Is there a way to resize an image using only []() convention (not using <img>)?

I have tried some things so far that haven't worked. Most notably:

Adding ?s=200/&s=200 parameter to the end of the image url (recommended here)

The best solution I have so far is to download the image and resize it and re-upload it. Any way of changing its size from the md itself or by way of changing the url (e.g. via a parameter etc) would be much better


Solution

  • The GFM (GitHub Flavored Markdown) specification for images does not include any size attributes.

    Meaning a []() won't include any size element in its HTML generated form.

    If you change the Markdown processor to Kramdown for GitHub pages, then this would work:

    ![test image size](/img/post-bg-2015.jpg){:class="img-responsive"}
    ![test image size](/img/post-bg-2015.jpg){:height="50%" width="50%"}
    ![test image size](/img/post-bg-2015.jpg){:height="700px" width="400px"}
    

    Using HTML would work (provided you use the https://raw.githubusercontent.com/ of your image, but this is not possible in your case.

    <img src="https://your-image-url.type" width="100" height="100">
    

    You can try, for testing:

    {:refdef: style="width: 10px; height: 10px"}
    [![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png)](./somelink)
    {: refdef}