slidify - 如何定位图像？答案

【问题标题】：slidify - how to position an image?slidify - 如何定位图像？
【发布时间】：2013-05-30 00:51:23
【问题描述】：

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

编辑

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

【问题讨论】：

我现在正在解决同样的问题。我原以为fig.align='center' 会成功，但它似乎没有......或者我错过了一些东西。
我认为您必须使用 html 来执行此操作。您可以做一些事情 1) 直接通过 slidify's GitHub 联系 Ramnath 并询问（他对反馈非常开放） 2) 使用带有 slidify 的报告包的 github version 您可以使用 IM 添加带有一些控制的图像（其中实际上只是为图像生成 html）。我认为（虽然不能代表 Ramnath）slidify 旨在尽可能地利用 Markdown，而不是使用 HTML。
我刚刚意识到你的意思是 R 生成的图形。你仍然可以按照我说的做，但从缓存中获取图形。很抱歉造成误会。
你能发布一个指向你的 Rmd 文件和你的 html 文件的链接吗？
嗨 Ramnath，我的示例 .Rmd 和 .html 的链接发布在 github.com/johnstantongeddes/JSGtest 上（“发布”到 github 是 slidify 的功能之一，我非常感谢顺便说一句）。我已经对问题进行了编辑。我知道可能的答案是我可以使用 .html 输出更改位置，但这会随着每个“编织”而消失。是否需要新模板？

标签： r slidify

【解决方案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>

但是，您需要为每张图片执行此操作。

【讨论】：