r - slidify - 如何定位图像？

Question

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

编辑

我在这里一般指的是图像，但这也适用于 R 图形。默认设置似乎是将图像居中 - 我希望能够将它们并排放置，甚至放置在任意位置。

Answer 1

这是一个(丑陋的)解决方法，可以将图像居中并调整其大小，以确保它们都适合您的幻灯片。

将以下内容添加到 index.Rmd 的顶部，位于描述 block 下方。

<!-- 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，但我找不到直接的方法来加载 <script> Slidify 加载 jQuery 后阻止。

或者，您也可以使用纯 HTML 手动实现此目的:

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

但是，您需要对每个图像执行此操作。