quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.95k stars 326 forks source link

Aboslute positioning of images not working as expected #1244

Open mroavi opened 2 years ago

mroavi commented 2 years ago

System info

quarto-cli git version: d7a4cf1cc

❯ quarto check

[✓] Checking Quarto installation......OK
      Version: 99.9.9
      Path: /home/mroavi/repos/quarto-cli/package/dist/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.4
      Path: /usr/bin/python3
      Jupyter: 4.10.0
      Kernels: julia-1.5, julia-1.7, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

I'm not using RStudio IDE.

My system:

OS: Manjaro Linux x86_64
Host: XPS 13 9360
Kernel: 5.15.36-1-rt41-MANJARO

Bug description

The height parameter does not seem to be working as expected when using absolute positioning of images. For example, the following code generates two slides with images of the same size.

---
format:
  revealjs:
    incremental: false   
---

# Test

![](image.png){.absolute top=200 left=500 height="500"}

# Test

![](image.png){.absolute top=200 left=500 height="1000"}

Here are the properties of the image I'm using:

image

Here is the image itself (not sure if GitHub compresses it):

image

Apparently, the image stops being resized if the height value is above a certain threshold. Moreover, Changing the width parameter has different behavior than changing the height. I also noticed that the image automatically appears way smaller than when using something like ![](image.png){width=60% fig-align="center"}.

Checklist

jjallaire commented 2 years ago

@cderv I'm not sure if this is something we can actually resolve given how reveal handles images and sizes. I'm targeting for "Future" but it would be good to know the lay of the landscape when you get a chance to take a closer look at this.

braniii commented 1 year ago

I can reproduce this issue. Taking a look at the html inspector it seems that the following lines are defining the upper threshold.

.reveal img, .reveal video, .reveal iframe {
  max-width: 95%;
  max-height: 95%;
}

Increasing this in my custom theme solved it for me.