#Docus image size

1 messages · Page 1 of 1 (latest)

peak junco
#

when using the markdown format to add images how can I change the image size?

worthy dragonBOT
#

Hi @peak junco. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You can control the image size directly in the markdown using attributes after the image, as shown in the docs.

For example, to set a fixed width:

![Small Image](/assets/templates/nuxt/dashboard-dark.png){width="300"}

This will render the image at 300px width (height scales automatically). [Images & embeds]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@peak junco Kapa.ai is still learning and improving, please let me know how I did by reacting below.

peak junco
#

@worthy dragon this doesn't seem to work:

---
title: Overview
description: Test
navigation:
  icon: i-lucide-play
---

![Gradle Plugin Portal Version](https://img.shields.io/gradle-plugin-portal/v/redacted){width="20"}

however the image is still huge.

worthy dragonBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The docs only show the {width="300"} syntax working for images that go through the Nuxt UI prose system (i.e. MDC/Content + Nuxt UI typography). [Images & embeds]

From the knowledge I have, there’s no explicit explanation of why your specific example with the shields.io image stays large, or how to debug when the width attribute is ignored. The sources also don’t document any front‑matter or per‑page setting that would change this behavior.

So, based only on the docs:

  • The supported pattern is:

    ![Small Image](/assets/templates/nuxt/dashboard-dark.png){width="300"}

    which should render smaller when processed by the Nuxt UI prose image component. [Images & embeds]

  • Images are styled via the prose.img config in app.config.ts, where the base class is w-full. If that’s applied, it can override your width unless the component logic respects the width prop. [Images & embeds]

The knowledge sources do not explicitly describe:

  • Any limitation with remote images (like <https://img.shields.io/...>).
  • Any bug or caveat where {width="..."} is ignored.
  • Any alternative syntax for sizing in markdown beyond that example.

Because of that, I can’t confidently say why your particular image remains large or provide a guaranteed fix based solely on the provided docs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: