Jupyter Notebook 纵向显示图像答案

【问题标题】：Jupyter Notebook display image in portrait orientationJupyter Notebook 纵向显示图像
【发布时间】：2017-10-05 01:50:17
【问题描述】：

我正在使用以下 Markdown 语法在 Jupyter Notebook 中显示图像：

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

该图像是使用 iPhone 以纵向模式拍摄的，但当它显示在笔记本电脑中时，它会以横向模式显示。如何以纵向显示图像？

【问题讨论】：

标签： python markdown jupyter-notebook

【解决方案1】：

不确定这是否能回答您的问题，但您可以在 markdown 单元格中使用 HTML，并使用 CSS 格式化图像：

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

编辑

对齐两个图像的完整示例：

方法一：在markdown块中：

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

方法二：在代码块中：

%%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>

方法 2 可以在 markdown 块中，但您必须使用内联样式，而不是单独的 css 和 html。

【讨论】：

transform 样式似乎有效。我不知道这是否相关，但我无法使用此方法将两个图像显示在同一行。
一种方式，您可以在样式中添加float: left。您还可以在
中嵌入图像以根据需要正确对齐它们...
您能否在答案中添加一个有关如何对齐图像的示例？
当然，我希望它有所帮助。请注意，您也可以在 markdown 块中执行方法 2，但您必须使用内联样式而不是单独的 css 和 html。