Jupyter Notebook 如何展示竖向图片

Question

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

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

这张图片是用iPhone拍摄的竖屏模式，但在笔记本电脑上显示时却呈现为横屏模式。如何将图片以竖屏模式显示？

- wigging

Answer 1

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

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

编辑

对齐两张图片的完整示例：

方法1：在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。

- Gerges

---

transform样式似乎起作用了。不知道这是否相关，但是我无法使用这种方法将两个图像显示在同一行。 - wigging

一种方法是在样式中添加 float: left。您还可以将图像嵌入到 <div> 中，以使它们按照您想要的方式对齐... - Gerges

你能在回答中添加一个如何对齐图像的示例吗？ - wigging

当然，我希望这能有所帮助。请注意，您也可以在Markdown代码块中使用第二种方法，但需要使用内联样式而不是分离的CSS和HTML。 - Gerges