Resize the image in jupyter notebook using markdown

HtmlImageJupyter NotebookMarkdownJupyter

Html Problem Overview


I want to add the image in the Jupyter notebook and I want to have particular height and width. When I try to add the image using

> ![](img.png)

the code is adding the complete image but as per the image dimension and I don't have control over it. I try to use ![](img.png =200x100) but then the image does not appear.

Does anybody know of a way to add an image with pre-specified dimensions?

Html Solutions


Solution 1 - Html

If you're attaching your images by inserting them into the markdown like this:

![Screenshot.png](attachment:Screenshot.png)

These attachment links don't work:

<img src="attachment:Screenshot.png" width="500"/>

DO THIS. This does work. Just add div brackets:

<div>
<img src="attachment:Screenshot.png" width="500"/>
</div>

Hope this helps!

PS I'm using jupyter_core-4.4.0 & jupyter notebook.

Solution 2 - Html

You can use html directly

<img src="image.JPG" alt="Drawing" style="width: 200px;"/>

Solution 3 - Html

Image control in Jupyter markdown is possible but the image needs to be preceded by "attachment" or it doesn't display.

<img src="attachment:image.png" width="400">

Cf. Simon Byrne.

With a url it works directly:

<img src=https://image.slidesharecdn.com/tensorflowppt-160408142819/95/tensorflow-4-638.jpg?cb=1460125744 width="500">

Solution 4 - Html

You need to use HTML as Mark showed you, since you cannot do it with ![](img.png) syntax. From John Gruber's website:

> As of this writing, Markdown has no syntax for specifying the dimensions of an image; if this is important to you, you can simply use regular HTML tags.

Solution 5 - Html

You can also use Image module from IPython.display

https://ipython.org/ipython-doc/3/api/generated/IPython.display.html#IPython.display.Image

for example

from IPython.display import Image
Image(url='https://www.maxpierini.it/ncov/pics/ITA.png', width=200)

Use filename= instead of url= if the image is a local file.

Solution 6 - Html

I'm using JupyterLab in a JupyterHub instance and the other answers didn't work for me. I've solved the problem with a <div> around my image. Here is my 400px width and right aligned image:

<div style="max-width:400px;margin-left: auto; margin-right: 0;">
    ![My Image alt text](image.jpg)
</div>

Solution 7 - Html

enter image description here

change this 'Code' to 'Markdown' as like the screenshot. Later add

<div> <img src="bar graph.png" alt="Drawing" style="width: 400px;"/></div> 

you are done

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnil VermaView Question on Stackoverflow
Solution 1 - HtmlMrFunView Answer on Stackoverflow
Solution 2 - HtmlMarkView Answer on Stackoverflow
Solution 3 - HtmlpudepiedView Answer on Stackoverflow
Solution 4 - HtmlLlewlynView Answer on Stackoverflow
Solution 5 - HtmlMax PieriniView Answer on Stackoverflow
Solution 6 - HtmlnevesView Answer on Stackoverflow
Solution 7 - HtmlSrabon BhowmikView Answer on Stackoverflow