How do I make sure my figures auto resize to the browser window size?

[kylejcaron]

Description

Is there a way to make sure matplotlib plots automatically get resized as I resize my browser window?

Currently, when my browser window size is small and the figure width is large, I have to end up scrolling to see the entire image

---
layout: post
title:  "Test Post"
date: "2025-02-25"
categories: []
code-fold: true
---


# Section 1
```{python}
import matplotlib.pyplot as plt
import numpy as np

t=100

fig, ax = plt.subplots(figsize=None)
ax.plot(np.arange(t), np.random.normal(0, 1, size=t).cumsum(-1))
ax.autoscale(enable=True) 
plt.tight_layout()
plt.show()
```

[mcanouil]

Set the CSS property max-width: 100% for the images at whatever level you want/need.

[kylejcaron]

any obvious reason why its still not working?

---
layout: post
title:  "Test Post"
date: "2025-02-25"
categories: []
code-fold: true
format:
    html:
        css: styles.css
        max-width: 100%

---


# Section 1
```{python}
#| max-width: 100%

import matplotlib.pyplot as plt
import numpy as np
fig, ax = plt.subplots(figsize=(8,4))
t=100
ax.plot(np.arange(t), np.random.normal(0, 1, size=t).cumsum(-1))
plt.tight_layout()
plt.show()
```

[mcanouil]

max-width is not a YAML option.

#| max-width: 100% will apply to the "cell" container not the image.

You can see all that by inspecting the HTML in your favorite browser with the inspect tool or developer mode.

[kylejcaron]

Thank you! adding this to my styles.css did the trick like you said

.figure-img {
    max-width: 100%;   /* Ensures image does not exceed figure width */
    height: auto;      /* Keeps aspect ratio */
}