html - How do I keep rotated image inside lower boundary in dash?

Question

My dash body is:

body = html.Div([html.H1("My dashboard")
, dbc.Row([
        dbc.Col(radio_buttons)
        , dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary", id='output-image', 
                  className='bg-success', style={'height': '300px', 'width': '400px'})))
        , dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary", id='output-address')))

        ],style={'height': '300px'})
, dbc.Row([dbc.Col(create_data_table(df))])
    ],
id="dash-container",)

and I have a function which returns a rotated image thus:

 return (html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode('utf-8')), style={'max-height':'100%', 'max-width':'100%'}))

when rotation is 0 or 180 the image fits in its container:

but 90 or 270 it doesn't:

How can I keep the image in this box preserving its aspect ratio?

question from:https://stackoverflow.com/questions/65841947/how-do-i-keep-rotated-image-inside-lower-boundary-in-dash

Answer 1

Remove style={'max-height':'100%', 'max-width':'100%'} or change it to style={} if you need an input to the function.