How to fit image to fill dashboard card / row / column?

[Spacecortez]

Description

Hello,

For a simple dashboard, I'd like to have some of my plots be generated by R code separately (for real-time updates) and then just included as markdown images.

I thought that by using the .fill class the contents of each column / row would be resized to fit, but I'm finding that the images are usually overflowing.

Is it possible to automatically make the images fit their container?

Here's a minimal example:

---
title: "My Dash"
format: 
    dashboard:
        orientation: columns
lightbox: 
    match: auto
---

## Left Column {width=30%}

Some markdown text here.
- point 1
- point 2

## Right Column {width=70% title=Runs}

### Row 1 {.fill height=60% padding=0%}

![Plot 1](file:Plot01.png){group="plots"}

### Row 2 {.fill}

#### Left {.fill}

![Plot 2](file:Plot02.png){group="plots"}

#### Right {.fill}

![Plot 3](file:Plot03.png){group="plots"}

Here's what it renders to:

As you can see, the smaller cards are fitting their images well, but the bigger one loses the bottom part, including the X axis.

If I make my winder bigger, I lose the X axis on all of the plots.

Is there something I can do to make them fit as expected?

Thanks

quarto version: 1.6.40
OS: arch linux

[mcanouil]

I don't recall .fill being a Bootstrap class.
Are you sure it exists?
If not, then you should create it as a class not defined cannot have any effects.

Also, you are not setting the class on the image itself.

[Spacecortez]

The .fill class is from the Quarto guide on dashboard layout:

Fill vs. Flow

Each row in your dashboard that is not given an explicit height will determine its size by either filling available space or by flowing to its natural height. Filling layout is generally the default, however for certain types of content (e.g. markdown text) flow layout is the default.

If the default behavior isn’t what you want, you can explicitly specify filling or flowing behavior using the .fill and .flow classes applied to a row. For example:

> ## Row {.fill}
> 
> ## Row {.flow}
> 

[mcanouil]

I think you are mistaken on the goal of this.
That's the row (or container) that fills or flows the area which you can see on your screenshot.

What you seem to want here is for the content to fit their containers (card / row / column).
That's something a bit different.

[mcanouil]

Also what do you expect the following div "attribute" to do? padding is not an HTML div attribute.

::: {padding="0%"}
...
:::

Will be translated to

<div data-padding="0%">

</div>

So unless, you have JavaScript or post-processing happening using data-padding this will lead to no visual difference.

[mcanouil]

To add a bit, here the images are resized with the .img-fluid class which is a very typical way to deal with this in HTML/CSS (you can easily find online many occurrences).

https://www.w3.org/WAI/WCAG22/Techniques/css/C37

Code

---
title: "My Dash"
format: 
  dashboard:
    orientation: columns
---

## Left Column {width=30%}

Some markdown text here.

- point 1
- point 2

## Right Column {width=70%}

### Row 1 {height=60%}

![Plot 1]({{< placeholder 600 400 >}})

### Row 2

#### Left

![Plot 2]({{< placeholder 600 400 >}})

#### Right

![Plot 3]({{< placeholder 600 400 >}})

Screen.Recording.2025-01-31.at.12.59.28.mov

The images are resized to always have the image be max-width: 100% but keep the aspect ratio.

.img-fluid {
    max-width: 100%;
    height: auto;
}
```

If you want another behaviour, you need to learn HTML/CSS if you don't already and search online for very numerous answers to that question.

[mcanouil]

For reference:

• Making plotly graphs fill the container width #2082
• How to put a responsive-height vega visual into a dashboard #8343

[Spacecortez]

Yes, I tried fixing it with CSS but wasn't succeeding.

I eventually found a solution - at the bottom of this post.

You're right that I was mistaken about quarto's .fill and .padding features.

So, in (S)CSS, I tried fixing .img-fluid to have height:100% so that the image would resize to its container. But I found that they still overflowed on the y-axis.

So I reverse-engineered how quarto makes code cell contents fit. Here I've replaced one of the placeholder images with a code cell that produces a simple plot. And the output of that plot will scale to fit into its container, while the images do not:

---
title: "My Dash"
format: 
  dashboard:
    orientation: columns
---

## Left Column {width=30%}

Some markdown text here.

- point 1
- point 2

```{r}
library(tidyverse)
```


## Right Column {width=70%}

### Row 1 {height=60%}

```{r}
df <- tibble(a=seq(1:10), b=a*5)
df |> ggplot(aes(x=a, y=b)) +
    geom_point()

```


### Row 2

#### Left

![Plot 2]({{< placeholder 600 400 >}})

#### Right

![Plot 3]({{< placeholder 600 400 >}})

On inspecting the page, I see that the plot image generated by R is contained like so:

• div - class="card-body html-fill-item html-fill-container"
• div - class ="cell-output-display html-fill-item html-fill-container"
• img - class = "img-fluid quarto-dashboard-image-contain"

However, the simple images have two more containers between them and the "cell-output-display" <div>, like so:

• div - class="card-body html-fill-item html-fill-container"
• div - class ="cell-output-display html-fill-item html-fill-container"
• figure - class="figure"
• p
• img - class="img-fluid figure-img"

So somewhere in the <p> and <figure> layers the container size is being inflated so that even if I set the height and width of my <img> to 100%, it is able to overflow the "cell-output-display" <div> size.

The solution:

This is probably not perfect, as it will apply to every figure in the dashboard, and there's probably a way to be more selective, but for now this works:

qmd

---
title: "My Dash"
format: 
  dashboard:
    orientation: columns
    theme: custom.scss
---

## Left Column {width=30%}

Some markdown text here.

- point 1
- point 2

## Right Column {width=70%}

### Row 1 {height=60%}

![Plot 1]({{< placeholder 600 400 >}})


### Row 2

#### Left

![Plot 2]({{< placeholder 600 400 >}})

#### Right

![Plot 3]({{< placeholder 600 400 >}})

scss

/*-- scss:rules --*/

.quarto-figure > .figure {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.quarto-figure > .figure > p {
  max-width: 100%;
  max-height: 100%;
}

.img-fluid {
  height:100%;
}