Jupyter Notebook display image in portrait orientation

user_1084875 0
Viewed 6086

I am displaying an image in a Jupyter Notebook using the following Markdown syntax:

![sieve shaker](images/shaker.jpg)

The image was taken in portrait mode with an iPhone but when it is displayed in the notebook it appears in landscape orientation. How can I display the image in portrait orientation?

enter image description here

jupyter-notebook markdown python
1 Answers

Not sure if this answers your question, but you can use HTML in the markdown cell, and format the image with CSS: 

<img style="transform: rotate(90deg); width:500px" src="images/shaker.jpg" alt="sieve shaker" title="Title text" />

EDIT

Complete example to align two images:

Method 1: In a markdown block:

<img style="float:left;transform: rotate(90deg); width:300px" src="img.jpg" />
<img style="float:left;transform: rotate(90deg); width:300px" src="img.jpg" />

Method 2: In a code block:

%%html
<style>
.inline-block {
   display: inline-block;
}

.my_img {
    transform: rotate(90deg);
    width : 300px
}
</style>

<div>
    <div class="inline-block" >
        <img class="my_img" src="img.jpg" />
    </div>
    <div class="inline-block">
        <img  class="my_img" src="img.jpg" />
    </div>
</div>

Method 2 can be in a markdown block, but you will have to use inline style rather than separate css and html.

user_54953040
Related