滑动 - 如何定位图像？

Question

我正在尝试使用slidify制作html5演示文稿.虽然使用markdown创建项目符号和文本很清楚,但我不确定如何使用图像.我可以使用imagemagick进行大小调整,但是如何使用降价来居中(或冲洗顶部/右/底部)和图像？

编辑

我这里指的是图像,但这也适用于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>元素的所有段落元素,并添加设置的.centered类text-align: center.

稍后由Slidify加载相同版本的jQuery,但是<script>在Slidify加载jQuery之后我无法找到加载块的直接方式.

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

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

但是,您需要为每个图像执行此操作.