Image resize in Vitepress

[Goozoon]

Hi
HTML is only the way to resize images?

i have few images in ./docs/public/ folder and wish to markdown resize them

Thank you

[xu4wang]

Do you mean to display the image with specific width and height?
If so, you can use markdown-it plugin. The one I am using is "@tlylt/markdown-it-imsize": "^3.0.0",

[brc-dd]

![image description]('your-image.png'){width=250px height=100px}

[xu4wang]

![image description]('your-image.png'){width=250px height=100px}

Ah...it looks great, it's flexible to config the css attributes directly. @brc-dd Is this a hidden feature of vitepress? being a new comer, i didn't find it in the document

[brc-dd]

Yeah it's not explicitly documented. But we use markdown-it-attrs which allows us to use that syntax.

[xu4wang]

Yeah it's not explicitly documented. But we use markdown-it-attrs which allows us to use that syntax.

Thanks @brc-dd for the info.

I want to have the two danger container placed horizontally. Do you think there is an easy way to pass display: flex to an outer div?

I had a quick try with below code without luck.

:::: info {display=flex}
::: danger
danger string 1
:::
::: danger
danger string 2
:::
::::

[brc-dd]

Just a clarification about that, in my example, that width and height will be added as attributes to the img tag, not as styles. For styles you can just add a custom CSS file with something like:

.custom-block.info {
  // ...
}