slidify -如何定位图像？

Question

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

编辑

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

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>元素的所有段落元素，并添加设置text-align: center的.centered类。

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

或者，您也可以使用纯HTML手动完成此操作：

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

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