Scaled html.Img seems to take up unscaled space

Dash Python
1

I am trying to add a logo to my application header. The original image file is large so I scale it. The problem is that the scaled image seems to take up the same vertical space as the unscaled image which is not what I want. I would like it to only take up the vertical space as the scaled image. Is this a bug? If not, how do I make it work?
If you run my minimal dash program below, it is easy to see what I mean. At least on my setup. The middle scaled image has blank space below the scaled image. I uploaded the plotly logo used in the example.

![plotly|225x225](upload://xoWpN9Jb9jFTpn4Ky9VY2OKfnqP.png)
#!/usr/bin/env python3
"""Minimal dash program."""

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([dbc.Row([dbc.Col(html.H2('App Header', className='card-title'))]),
                            html.Hr(),
                            dbc.Row([dbc.Col(html.Img(src='assets/plotly.png', style={'height': '20%'}))]),
                            html.Hr(),
                            dbc.Row([dbc.Col(html.Img(src='assets/plotly.png'))]),
                            html.Hr()])

if __name__ == '__main__':
    app.run_server(debug=True)
2

Hm remove dbc.Col before html.Img should help. Something as below:

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
    dbc.Row([
        dbc.Col(
            html.H2('App Header', className='card-title'))
    ]),
    html.Hr(),
    dbc.Row([
        html.Img(src='assets/plotly.png', 
                 style={'height': '12%',
                        'width':'12%',
                        'padding-left':10,
                        'position':'relative'})]),
    html.Hr(),
    dbc.Row([
            html.Img(src='assets/plotly.png')
    ]),
    html.Hr()
])

if __name__ == '__main__':
    app.run_server(debug=True)

Screenshot 2023-04-07 081535
Screenshot 2023-04-07 0815351920×847 80.7 KB

3

Thank You. You gave me enough hints to get what I wanted. What I really was after is a logo next to a help button as in the first row in the code below. I found that putting height and width the same distorted the image. You can see different things I tried below with the first row giving me what I want.

#!/usr/bin/env python3
"""Minimal dash program."""

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([dbc.Row([dbc.Col(dbc.Button("Menu", id='open-menu', size='sm', n_clicks=0),
                                                       width={'size': 1}),
                                     dbc.Col(html.H2('App Header', className='card-title'), width='auto'),
                                     dbc.Col([dbc.Button("Help", id='help-button', size='sm', n_clicks=0),
                                              html.Img(src='assets/plotly.png',
                                                       style={'width': '25%',
                                                              'padding-left': 10,
                                                              'position': 'relative'})],
                                             width={'size': 2})],
                                    justify='between'),
                            html.Hr(),
                            dbc.Row([dbc.Col(html.Img(src='assets/plotly.png', style={'height': '25%', 'width': '25%'}),
                                             width={'size': 2})]),
                            html.Hr(),
                            dbc.Row([dbc.Col(html.Img(src='assets/plotly.png', style={'width': '25%'}),
                                             width={'size': 2})]),
                            html.Hr(),
                            dbc.Row([html.Img(src='assets/plotly.png', style={'height': '25%', 'width': '25%'})]),
                            html.Hr(),
                            dbc.Row([dbc.Col(html.Img(src='assets/plotly.png'))]),
                            html.Hr()])

if __name__ == '__main__':
    app.run_server(debug=True)

dash
dash1822×2105 126 KB

1 Like
4

Great. Glad you found the solution yourself