quarto-dev / quarto-dev/quarto-cli

Caption distorts images aspect ratio in revealjs

Open
#7,809 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement revealjs
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Putting in a caption takes up space from the image and distorts the image.

Steps to reproduce
---
title: "Observable Test"
format: revealjs
---

## Caption distorts iamge

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

![Caption distorts image](_figs/ground-forest.jpg){.absolute top=400 left=50 width=40%}

![Caption distorts image](_figs/aerial-forest.jpg){.absolute top=400 right=50 width=40%}
Expected behavior

This is how it appears without caption:
image

Actual behavior

image

Your environment
  • VS Code
  • Quarto 1.3.450
Quarto check output

[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.1: OK
Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.3.450
Path: /opt/quarto/bin

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

[✓] Checking Python 3 installation....OK
Version: 3.9.13
Path: /home/fes33/Documents/GIK - R&D/Personal - Papers and Reports/10 - Thesis/_Presentation/env/bin/python
Jupyter: 5.5.0
Kernels: python3, julia-1.9

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

[✓] Checking R installation...........OK
Version: 4.1.2
Path: /usr/lib/R
LibPaths:
- /home/fes33/R/x86_64-pc-linux-gnu-library/4.1
- /usr/local/lib/R/site-library
- /usr/lib/R/site-library
- /usr/lib/R/library
knitr: 1.43
rmarkdown: 2.22

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by rendering the provided .qmd example with the revealjs format and compare the captioned and uncaptioned image behavior. Done means absolutely positioned images retain their aspect ratio when a caption is present, matching the expected no-caption appearance.

Written by the indexing model from the issue text.

Assessment

Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.