Slidify - как разместить изображение?

Я экспериментирую с использованием slidify для создания презентаций html5. Хотя использование уценки для создания пули и текста ясен, я не уверен, как работать с изображениями. Я могу изменить размер и использовать imagemagick, но как я могу центрировать (или скрывать верхнее/правое/нижнее) и изображение с помощью уценки?

Я вообще ссылаюсь на изображения здесь, но это также относится к графике R. По умолчанию, по-умолчанию, это центрирование изображений - я хотел бы иметь возможность размещать их бок о бок или даже в произвольных местах.

Ответы

Ответ 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.

Та же самая версия jQuery загружается позже Slidify, но я не смог найти прямой способ загрузить блок <script> после того, как Slidify загрузил jQuery.

В качестве альтернативы вы также можете вручную добиться этого, используя простой HTML:

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

Однако вам нужно сделать это для каждого изображения.