我正在尝试使用slidify制作 html5 演示文稿。虽然使用 markdown 创建项目符号和文本很清楚,但我不确定如何使用图像。我可以使用imagemagick调整大小等,但是如何使用 markdown 居中(或刷新顶部/右侧/底部)和图像?
编辑
我在这里一般指的是图像,但这也适用于 R 图形。默认值似乎是居中图像 - 我希望能够将它们并排放置,甚至可以放置在任意位置。
我正在尝试使用slidify制作 html5 演示文稿。虽然使用 markdown 创建项目符号和文本很清楚,但我不确定如何使用图像。我可以使用imagemagick调整大小等,但是如何使用 markdown 居中(或刷新顶部/右侧/底部)和图像?
编辑
我在这里一般指的是图像,但这也适用于 R 图形。默认值似乎是居中图像 - 我希望能够将它们并排放置,甚至可以放置在任意位置。
这是一个(丑陋的)解决方法,可以将图像居中和调整大小,以确保它们都适合您的幻灯片。
将以下内容添加到您的顶部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>
但是,您需要为每个图像执行此操作。