Deal with images quickly in Quarto presentaion based on revealjs

[lizhiwei1994]

Hi everyone.

Contents

I am using Quarto presentation based on revealjs to make slides. I encountered difficulties when laying out the images.

In Microsoft PowerPoint we can quickly layout images by moving, dragging and stretching them. Just like I did in the video, it only takes twenty seconds to complete the layout of the image.

In Qarto, I need to try different parameters to find the right position and size of the image. I learned from Advanced Reveal and Figures about the layout of the images in Quarto. Such as:

![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=0 right=50 width="300" height="300"}

Video layout images in PowerPoint

20220827_202826.mp4

Question

1. How to zoom the image in equal ratio, for example, reduce the image by 50% or enlarge the image by 200%. I use ![](image.png){width="2%" height="2%"} to zoom the image, but it seems that sometimes this code works and sometimes it does not.
2. Is there any method or trick for quick layout of images like in PowerPoint?

Reproducible code

Click me

---
title: "Untitled"
format: revealjs
editor: visual
---

## 
if I do noting only the `first_image` can be shown.

![first_image](https://upload.wikimedia.org/wikipedia/commons/1/1a/Elephant_Diversity.jpg)
![second_image](https://upload.wikimedia.org/wikipedia/commons/7/70/Elephas_africanus_-_1700-1880_-_Print_-_Iconographia_Zoologica_-_%28white_background%29.jpg)
![third_image](https://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg)


## 
I trie to zoom out the images and use `{layout-nrow=2}`, but I can never get the layout to work as well as it does in PowerPoint. I can't even keep 3 images on the screen at the same time.

::: {layout-nrow=2}
![first_image](https://upload.wikimedia.org/wikipedia/commons/1/1a/Elephant_Diversity.jpg){width="200%" height="200%"}

![third_image](https://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg){width="2%" height="2%"}

![second_image](https://upload.wikimedia.org/wikipedia/commons/7/70/Elephas_africanus_-_1700-1880_-_Print_-_Iconographia_Zoologica_-_%28white_background%29.jpg){width="2%" height="2%"}


:::

[wiesehahn]

Would be awesome to have a visual editor where it is possible to intuitively resize and position elements (images/text/...). Like slides.com or powerpoint. Relative position and size attributes should then be automatically inserted as code. :)