Resize image markdown

Dash Python
#1

Hi there !

I have set a markdown functionality, with Plotly Dash, which contains a picture:

### Flower
![flower](https://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg)

My problem is : the picture is too big and I would like to resize it with the markdown.

Is it possible to do that ?

I have already tried thing sush as :

'![]({})'.format(app.get_asset_url('green_scoop.svg#thumbnail'))
img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}

But it didn’t work…

Thank you very much for your help!

#2

The second block of code includes code for 2 different pieces of the codebase. The first being for the markdown passed into Python and the second being CSS that you are defining.

First make sure you are adding the thumbnail tag to the image you are passing in.

### Flower
![flower](https://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg#thumbnail)

Then in your CSS file, located in the asses folder, include:

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}

If you are unfamiliar with how to add css to your app, see Adding your own CSS and Javascript to Dash Apps

1 Like