slidify - cách định vị hình ảnh?

Question

Tôi đang thử nghiệm bằng cách sử dụng slidify để tạo bản trình bày html5. Trong khi việc sử dụng dấu gạch ngang để tạo dấu đầu dòng và văn bản rõ ràng, tôi không chắc chắn cách làm việc với hình ảnh. Tôi có thể thay đổi kích thước và sử dụng như vậy imagemagick, nhưng làm cách nào để tôi căn giữa (hoặc tuôn ra trên cùng/phải/dưới) và hình ảnh bằng cách sử dụng markdown?

EDIT

Tôi thường đề cập đến hình ảnh ở đây, nhưng điều này cũng áp dụng cho đồ họa R. Mặc định dường như là hình ảnh định tâm - tôi muốn có thể đặt chúng cạnh nhau, hoặc thậm chí ở các vị trí tùy ý.

Answer 1

Dưới đây là một (xấu xí) làm việc xung quanh để căn giữa và thay đổi kích thước hình ảnh để đảm bảo tất cả đều phù hợp trên trang chiếu của bạn.

Thêm thông tin sau vào đầu số index.Rmd của bạn, ngay bên dưới khối mô tả.

<!-- 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 sẽ giới hạn chiều cao của hình ảnh để tránh bị tràn.

JS sẽ tải jQuery và sau đó tìm tất cả các phần tử đoạn có chứa phần tử <img> và thêm lớp .centered, đặt text-align: center.

Phiên bản tương tự của jQuery được tải về sau bởi Slidify, nhưng tôi không thể tìm thấy một cách thẳng về phía trước để tải khối <script> sau khi Slidify đã tải jQuery.

Ngoài ra, bạn cũng có thể tự đạt được điều này bằng HTML đơn giản:

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

Tuy nhiên, bạn sẽ cần phải làm điều này cho mỗi hình ảnh.