Image inside a row with the right aspect ratio

[PoshoDev]

Question

Hello, 👋

I'm trying to put an ui.image inside of a ui.row layout that has a fixed height while keeping the image's aspect ratio accurate. I have no idea how this task became a 2+ hour ordeal, so I think it's time to ask for help, if you don't mind. 😅

The main takeaway is that due to the use-case of my application, in our case, the width of the image should not be hard-coded since we don't know the dimensions of the image but the aspect ratio should remain.

Here is an MRC of my layout:

from nicegui import ui

WIDTH = 300
HEIGHT = 600

ROW_HEIGHT = 64
MY_SVG = f"https://placeholder.pics/svg/{WIDTH}x{HEIGHT}"

def my_layout() -> ui.row:
    with ui.row().style(f"max-height: {ROW_HEIGHT}px") \
    .classes("w-full border flex-nowrap") \
    .style("border-color: red; align-items: center") as row:
        ui.button(icon="menu")
        ui.space()
        with ui.row().style("padding: 0px;"):
            ui.button(icon="search")
    return row

Here are a few of the attempts I've tried:

# Attempt 1
with my_layout():
    ui.image(MY_SVG)  # Just an image.

# Attempt 2
with my_layout():
    ui.image(MY_SVG).style("max-width: 100%; max-height: 100%;")  # Try to limit the size of the image.

# Attempt 3
with my_layout():
    ui.image(MY_SVG).style(f"height: {ROW_HEIGHT}px").props("fit='contain'") \
    .style("border-color: blue").classes("border")  # Match the height of the parent row using 'contain'.

# Attempt 4
with my_layout():
    ui.image(MY_SVG).style(f"height: {ROW_HEIGHT}px").props("fit='shrink-down'")  # Match the height of the parent row using 'shrink-down'.

# Attempt 5
with my_layout():
    ui.image(MY_SVG).style(f"height: {ROW_HEIGHT}px; width: {ROW_HEIGHT}px")

# Attempt 6
with my_layout():
    ui.image(MY_SVG).style(f"height: {ROW_HEIGHT}px; width: {ROW_HEIGHT}px").props("fit='contain'") \
    .style("border-color: blue").classes("border")  # Match the height of the parent row using 'contain'.

# Attempt 7
with my_layout():
    ui.image(MY_SVG).style(f"height: {ROW_HEIGHT}px; width: {ROW_HEIGHT}px").props("fit='shrink-down'")  # Match the height of the parent row using 'shrink-down'.

# Attempt 8
with my_layout():
    ui.image(MY_SVG).style(f"max-height: {ROW_HEIGHT}px; max-width: {ROW_HEIGHT}px").props("fit='contain'") \
    .style("border-color: blue").classes("border")  # Match the height of the parent row using 'contain'.

# Attempt 9
with my_layout():
    ui.image(MY_SVG).style(f"height: {ROW_HEIGHT}px; width: auto").props("fit='contain'")  # Match the height of the parent row using 'shrink-down'.

Needless to say I've scoured through Quasar documentation, but I can't figure for the life of me how to do this right. Any guidance would be appreciated. 😁

[falkoschindler]

Hi @PoshoDev,

I see two possibilities:

• Use QImg's "height" prop instead to set the image height, "fit=scale-down" and "position" to place it inside the occupied space:

  with ui.row(wrap=False).classes('w-full h-32 items-center border-2 border-blue-500'):
      ui.button('Button')
      ui.image('https://dummyimage.com/640x480').props(r'height=100% fit=scale-down position="0 0"')

• Alternatively you can use ui.interactive_image, which behaves a bit more ordinarily when it comes to layout and sizing:

  with ui.row(wrap=False).classes('w-full h-32 items-center border-2 border-blue-500'):
      ui.button('Button')
      ui.interactive_image('https://dummyimage.com/640x480').classes('h-full')

In both cases you need to set a height to the ui.row container. A maximum height won't be enough for its children to inherit a height.

[PoshoDev]

Hello @falkoschindler,

Nice seeing you again! 🙂

TL;DR: It worked, thank you!

Your first example stills brings up my issue with the unnecessary space.

with ui.row(wrap=False).classes('w-full h-32 items-center border-2 border-blue-500'):
    ui.button('Button')
    ui.space()  # Added an empty space to push the image to the right.
    ui.image('https://dummyimage.com/640x480').props(r'height=100% fit=scale-down position="0 0"') \
    .classes('border border-4 border-green-500')  # Added a border to the image.

However, your second example making use of the ui.interactive_image solves it very well!

with ui.row(wrap=False).classes('w-full h-32 items-center border-2 border-blue-500'):
    ui.button('Button')
    ui.space()  # Added an empty space to push the image to the right.
    ui.interactive_image('https://dummyimage.com/640x480').classes('h-full') \
    .classes('border border-4 border-green-500')  # Added a border to the image.

I can now use my original layout (although with a height class instead of style) with the desired behavior:

from nicegui import ui

WIDTH = 300
HEIGHT = 600

ROW_HEIGHT = 64
MY_SVG = f"https://placeholder.pics/svg/{WIDTH}x{HEIGHT}"

def my_layout() -> ui.row:
    with ui.row(wrap=False).classes(f"w-full border h-{ROW_HEIGHT}") \
    .style("border-color: red; align-items: center") as row:
        ui.button(icon="menu")
        ui.space()
        with ui.row().style("padding: 0px;"):
            ui.button(icon="search")
    return row
    
with my_layout():
    ui.interactive_image(MY_SVG).classes('h-full') \
    .classes('border border-4 border-green-500')  # Added a border to the image.
    
if __name__ in {'__main__', '__mp_main__'}:
    ui.run()

I would've never guessed that the solution would've been on an ui.interactive_image on my own.

Thank you so much once again! 😁

[python-and-fiction]

Thanks @falkoschindler
Second is better:

with ui.row(wrap=False).classes('w-full h-32 items-center border-2 border-blue-500'):
    ui.button('Button')
    ui.space()
    ui.button('Button')
    ui.interactive_image('https://dummyimage.com/640x480').classes('h-full')