Slidify - 如何定位一张图片？

Question

我正在尝试使用slidify制作HTML5演示文稿。虽然使用Markdown创建项目符号和文本很清楚，但我不确定如何处理图像。我可以使用imagemagick调整大小等，但是如何使用Markdown居中（或顶部/右侧/底部）图像呢？

编辑

我通常指的是图像，但这也适用于R图形。默认情况下似乎会将图像居中-我想能够将它们并排放置，甚至在任意位置。

- JohnSG

---

我现在正在解决同样的问题。我本以为 fig.align='center' 可以解决问题，但似乎并不行...或者我漏掉了什么。 - Chase

我认为你需要使用HTML来完成这个任务。你可以采取以下几种方法：1）直接通过slidify的GitHub联系Ramnath并询问（他非常乐于接受反馈）；2）使用reports包的GitHub版本，结合slidify，你可以使用IM添加图片，并对其进行一些控制（实际上是生成图片的HTML代码）。我认为（尽管不能代表Ramnath），slidify旨在尽可能地利用Markdown，在无法使用Markdown时再使用HTML。 - Tyler Rinker

我刚意识到你是指R生成的图形。你仍然可以按照我的建议操作，但从缓存中获取图形。对于误解我感到抱歉。 - Tyler Rinker

你能否发布一下你的Rmd文件和html文件的链接？ - Ramnath

嗨Ramnath，我的示例.Rmd和.html的链接已发布在https://github.com/johnstantongeddes/JSGtest上（顺便说一下，将“发布”到github是slidify的一个我非常欣赏的功能之一）。我对问题进行了编辑。我现在意识到可能的答案是可以使用.html输出更改位置，但这将在每次“编织”时被清除。需要一个新模板吗？ - JohnSG

Answer 1

这里有一个（丑陋的）解决方案，可以居中并调整图像大小，以确保它们都适合幻灯片。

在您的index.Rmd顶部，在描述块下面添加以下内容：

<!-- Limit image width and height -->
<style type='text/css'>
img {
    max-height: 560px;
    max-width: 964px;
}
</style>

<!-- Center image on slide -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script type='text/javascript'>
$(function() {
    $("p:has(img)").addClass('centered');
});
</script>

CSS将限制图像的高度，以避免它们溢出。

JS将加载jQuery，然后查找包含<img>元素的所有段落元素，并添加.centered类，该类设置text-align:center。

Slidify稍后也会加载相同版本的jQuery，但我找不到一种直接的方法来在Slidify加载jQuery之后加载<script>块。

或者，您还可以使用纯HTML手动实现此操作：

<div style='text-align: center;'>
    <img height='560' src='x.png' />
</div>

然而，您需要为每个图像执行此操作。

- Keith Hughitt