Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
image resize in github flavored markdown.

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png =250x250)

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

    • Copy <img> in browser DevTools. Replace ![](url) to <img>. Add width(and height) attr.
    • <img src="https://camo.githubusercontent.com/..." data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" width="200" height="400" />

Other information

@Ghassanee
Copy link

Ghassanee commented Jun 24, 2021

<img src="https://cloud.githubusercontent.com/assets/yourgif.gif" width="400" height="790">

worked, Thanks!

@AliyahMillan
Copy link

AliyahMillan commented Sep 18, 2021

@consbulaquena thanks! it also works in issue comments.
When adding/editing a comment :

  • upload picture by drag-and-drop in the text field
  • replace ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="100" height="100">

Thanks this worked for me

Thanks, this also worked for me.

@wangpin34
Copy link

wangpin34 commented Oct 19, 2021

@nipgrnc104

Github doesn't apply the style attribute but obeys the width and height. So for github you can use the following HTML tag directly in the markdown:

<img src="url" alt="alt text" width="whatever" height="whatever">

Works for me. Thanks

@wakoliVotes
Copy link

wakoliVotes commented Nov 4, 2021

@consbulaquena thanks! it also works in issue comments.
When adding/editing a comment :

  • upload picture by drag-and-drop in the text field
  • replace ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="100" height="100">

Thanks this worked for me

Thanks, this also worked for me.

Thank you a lot, after trying severally, it worked. I almost gave up. The replace aspect was what I was missing.

@martinKindall
Copy link

martinKindall commented Dec 12, 2021

@danny-votez thank you, worked for me too, in Github.

@itbj
Copy link

itbj commented Dec 27, 2021

👍

@shakiz
Copy link

shakiz commented Mar 10, 2022

HTML syntax worked great. Not that much more complicated than existing markup. You only need to set the width, the image tag will automatically set the height for you to keep the right aspect ratio

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

this works easily

Yeah!! This works easily! Thanks.

@vinirossa
Copy link

vinirossa commented Jun 13, 2022

for me, I need to remove the "px" in order to get it to work ;)

@arlenyvalle
Copy link

arlenyvalle commented Jun 22, 2022

@dirkk0
Copy link

dirkk0 commented Aug 17, 2022

Apply style to image, plz try this my css style

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}
img[title="thumbnail"] {
   width:200px;
}
img[alt$="-thumbnail"]{
    width:300px;
}

my coding style

![img](link#thumbnail) <!-- src = link#thumbnail -->
![img](link "thumbnail") <!-- title = thumbnail -->
![img -thumbnail](link) <!-- alt = img -thumbnail -->

awesome, thanks @iphearum !

@fujikaiju
Copy link

fujikaiju commented Aug 30, 2022

Thanks guys, it also worked for me. After getting the URL from pasting the image in the "Issues" tab, i pasted it on the readme file and replaced: ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="600">

That is really helpfull my man, ty

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment