I’m trying to resize an image in my markdown column however the image only is displayed in the original size and if I try the Github resize format “=wxh” it doesn’t work:
''.format(app.get_asset_url('green_scoop.svg'))

To get around this I convert my images to png in a specific size, however is better to have these images in SVG.
''.format(app.get_asset_url('green_scoop.png'))

How can I achieve this with SVGs?
Hi @OtavioAcc
I learned how to do this from this blog: https://www.xaprb.com/blog/how-to-style-images-with-markdown/
See the section on Use CSS And Special URL Parameters.
You can add a URL paramater:
''.format(app.get_asset_url('green_scoop.svg#thumbnail'))
Then adjust the size in the .css file:
img[src*="#thumbnail"] {
width:150px;
height:100px;
}
Worked for me!
2 Likes
Work perfectly for me!! Thank you a lot.
1 Like
Hi @AnnMarieW
Thanks to @raptorbrad I have learnt how to resize an image in markdown to the current width of the visible container:
img[src*=“#thumbnail”] {
width: 100%;
}
Now I’d like to “merge” both approaches and have the following logic: final size = min(actual image width, visible container width), which would prevent the image from being stretched beyond its normal size, thus avoid display artifacts.
Is there a way to do this logi in the css ?
Thanks!
I have tried the below which looks better though the image is still wider than the original
img[src*=“#article”] {
width: 100%;
max-width: min-content;
}
Hello! Somehow this doesn’t to change anything further than just adding the max-width argument.
Hi @bsauvage,
This worked for me… Try running this minimal example. If you change the screen size the text and the image scale.
css file in assets folder:
img[src*="#article"] {
width:100%;
height:auto;
}
from dash import Dash, dcc
app = Dash(__name__)
blog = """

# About This Image
Galaxy cluster SMACS 0723 is a technicolor landscape when viewed in mid-infrared light by NASA’s James Webb Space Telescope. Compared to Webb’s near-infrared image at right, the galaxies and stars are awash in new colors.
"""
app.layout=dcc.Markdown(blog)
if __name__ == "__main__":
app.run_server(debug=True)
Thanks @AnnMarieW
So if I put the dcc.Markdown inside a dbc.Col(dbc.Row(…)) it doesn’t work (height:auto has no effect), and I need to use instead:
img[src*=“#article”] {
width: 100%;
max-width: min-content;
}
Then, I am still observing some stretching when the file is a png instead of a gif, in Chrome.
Does that make any sense?
No… can you make a minimal example that I can run?
Actually: it works as expected, the issue was with my system (Windows+Chrome) scaling/HDR settings/zoom settings!!!
So, problem solved! Thanks