2013-06-03 18 views
15

私は slidifyを使ってhtml5プレゼンテーションを試しています。箇条書きやテキストを作成するためのmarkdownの使用は明らかですが、イメージの操作方法は不明です。私はimagemagickを使ってサイズを変更することができますが、マークダウンを使ってどのようにセンター(またはトップ/ライト/ボトム)とイメージをフラッシュしますか?slidify - 画像の配置方法は?

EDIT

私はここで、画像を全体的に参照するんだけど、これはまた、Rのグラフィックスに適用されます。デフォルトでは画像のセンタリングが行われているように見えます。横並びに配置することも、任意の場所に配置することもできます。

+0

私は今この同じ問題を解決しています。私は 'fig.align = 'center''がこのトリックをやったと思っていただろうが、そうではないように見えるだろう。もしかしたら何かが欠けているかもしれない。 – Chase

+0

これを行うにはhtmlを使用する必要があると思います。いくつかのことができます。1)SlidifyのGitHub(https://github.com/ramnathv/slidify/issues?page=1&state=open)から直接Ramnathに連絡してください。 slidifyでレポートパッケージの[github version](https://github.com/trinker/reports)に 'IM'を使って画像を追加することができます。私は(Ramnathについては話すことはできませんが)slidifyはMarkdownを可能な限り利用し、HTMLを使用しないことを意図していると思います。 –

+0

私はあなたがR製作されたグラフィックスを意味することを理解しました。私が言ったようにあなたはまだできますが、キャッシュからグラフィックスをつかむことができます。誤解をおかけして申し訳ありません。 –

答えて

6

画像を中央に配置し、画像のサイズを変更してスライドにすべて収まるようにする(醜い)回避策があります。

説明ブロックのすぐ下の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クラスを追加します。

jQueryの同じバージョンがSlidifyによって後でロードされますが、SlidifyがjQueryをロードした後に<script>ブロックをロードするための簡単な方法が見つかりませんでした。

また、あなたはまた、手動でプレーンなHTMLを使ってこれを実現できます。

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

ただし、画像ごとにこの操作を行う必要があるでしょう。

関連する問題