CODEWITHSUNDEEP
htmlimagegithubmarkdownwiki
fhuertas
fhuertas

Reputation: 5493

Resize image in the wiki of GitHub using Markdown

I'm writing a wiki page on GitHub, and I'm using Markdown.

My problem is that I'm putting a large image (this image is in its own repository) and I need resize it.

I have tried different solutions, but they do not work:

![image](http://url.to/image.png "Title" {width=40px height=400px})

![image](http://url.to/image.png = 250x250)

![image](http://url.to/image.png = 250x)

[[http://url.to/image.png = 250x]]

Is there a way to get it?

It is preferable without HTML.

Upvotes: 481

Views: 377272

Answers (9)

Kir SR
Kir SR

Reputation: 69

If you insert an HTML image into unordered lists, then when rendering on GitHub, the lists surround the image, so it makes sense to pack the HTML image into a table

| <img src="https://github.com/favicon.ico" width="48"> |
| - |

Upvotes: 0

alciregi
alciregi

Reputation: 6598

Updated:

Markdown syntax for images (external/internal):

![test](https://github.com/favicon.ico)

HTML code for sizing images (internal/external):

<img src="https://github.com/favicon.ico" width="48">

Example:

test

Old Answer:

This should work:

[[ http://url.to/image.png | height = 100px ]]

Source: https://guides.github.com/features/mastering-markdown/

Upvotes: 641

Dolphin
Dolphin

Reputation: 39005

You can tried to put the image into table of markdown, like this:

| ![Kiku](docs/snapshot/home.jpeg)        | ![Kiku](docs/snapshot/sub.jpeg) |
| --------------------------------------- | --------------------------------------- |
| ![Kiku](docs/snapshot/user-center.jpeg) |                                         |

it will make the image layout like grid, but it could not custom for each single image size.

Upvotes: 7

stevec
stevec

Reputation: 52758

Resize by Percentage width=50% height=50%. Example:

<img src="https://i.imgur.com/ZWnhY9T.png" width=50% height=50%>

Resize by Pixels width="150" height="280". Example:

<img src="https://i.imgur.com/ZWnhY9T.png" width="150" height="280">

Some tips

  • To get a githubusercontent link for an image, drag and drop the image into any issue, and copy/paste the url from the code that is automatically generated. Example code: ![image](https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png)

  • There is no way to change the size of an image if the markdown format is of the form []() - so stop looking right now! - you must use <img> instead

  • Another useful summary of conventions that do and don't work here

  • All of the above is from here

Upvotes: 54

Seymur Mammadli
Seymur Mammadli

Reputation: 1814

I have used methods described above. Now I am using the method which is a way similiar but more simple to me.

  1. First create add README.md file to your project.
  2. Then upload screenshoots or whatever description images needed to your project main directory.
  3. After uploading image Assets use html to refer these assets directly without using link like below

Like this:

<img src="icon.jpg" width="324" height="324">

<p align="center">
  <img src="screen1.png" width="256" height="455">
  <img src="screen2.png" width="256" height="455">
  <img src="screen3.png" width="256" height="455">
</p>

On above example I have used paragraph to align images side by side. If you are going to use single image just use the code as below

<img src="icon.jpg" width="324" height="324">

Have a nice day!

Upvotes: 12

denis
denis

Reputation: 21947

This addresses the different question, how to get images in gist (as opposed to github) markdown in the first place ?

In December 2015, it seems that only links to files on github.com or cloud.githubusercontent.com or the like work. Steps that worked for me in a gist:

  1. Make a gist, say Mygist.md (and optionally more files)
  2. Go to the "Write Comment" box at the end
  3. Click "Attach files ... by selecting them"; select your local image file
  4. GitHub echos a long long string where it put the image, e.g. ![khan-lasso-squared](https://cloud.githubusercontent.com/assets/1280390/12011119/596fdca4-acc2-11e5-84d0-4878164e04bb.png)
  5. Cut-paste that by hand into your Mygist.md.

But: GitHub people may change this behavior tomorrow, without documenting it.

Upvotes: -2

nicobo
nicobo

Reputation: 599

GitHub Pages now uses kramdown as its markdown engine so you can use the following syntax:

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

http://kramdown.gettalong.org/syntax.html#images

I haven't tested it on GitHub wiki though.

Upvotes: 2

Kate Orlova
Kate Orlova

Reputation: 3283

Almost 5 years after only the direct HTML formatting works for images on GitHub and other markdown options still prevent images from loading when specifying some custom sizes even with the wrong dimensions. I prefer to specify the desired width and get the height calculated automatically, for example,

<img src="https://github.com/your_image.png" alt="Your image title" width="250"/>

Upvotes: 14

Fritzip
Fritzip

Reputation: 1337

On GitHub, you can use HTML directly instead of Markdown:

<a href="url"><img src="http://url.to/image.png" align="left" height="48" width="48" ></a>

This should make it.

Upvotes: 98

Related Questions