Slidify-¿Cómo posicionar una imagen?

Question

Estoy experimentando con el uso de slidify para hacer presentaciones html5. Si bien el uso de markdown para crear viñetas y texto es claro, no estoy seguro de cómo trabajar con imágenes. Puedo redimensionar y usar imagemagick , pero ¿cómo centrar (o vaciar arriba / derecha / abajo) e imagen usando markdown?

EDITAR

En general me refiero a las imágenes aquí, pero esto también se aplica a los gráficos R El valor predeterminado parece ser centrar las imágenes. Me gustaría poder colocarlas una al lado de la otra, o incluso en ubicaciones arbitrarias.

Answer 1

Aquí hay una (fea) solución para centrar y cambiar el tamaño de las imágenes para asegurarse de que todas se ajusten a sus diapositivas.

Agregue lo siguiente a la parte superior de su index.Rmd , justo debajo del bloque de descripción.

<!-- 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>

El CSS limitará la altura de las imágenes para evitar que se desborden.

El JS cargará jQuery y luego encontrará todos los elementos de párrafo que contengan un elemento <img> , y agregará la clase .centered , que establece text-align: center .

Slidify carga la misma versión de jQuery más adelante, pero no pude encontrar una forma directa de cargar el bloque <script> después de que Slidify haya cargado jQuery.

Alternativamente, también puedes lograr esto manualmente usando HTML plano:

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

Sin embargo, deberías hacer esto para cada imagen.