I'm attempting to control the height of images in gr.Image to display images of different heights at the same height by setting height=300. However, when I input two images of different sizes into Gradio, the icons for the image sources are not displayed with equal heights. As shown in the attached screenshot, the icon for the image source on the right exceeds the boundaries of its container. I would appreciate any suggestions or solutions to address this issue. Thank you.
Have you searched existing issues? 🔎
[X] I have searched and found no existing issues
Reproduction
import gradio as gr
with gr.Blocks() as app:
with gr.Row(equal_height=False):
with gr.Row():
input_image0 = gr.Image(
label="Image 0",
type="numpy",
image_mode="RGB",
height=300,
interactive=True,
)
input_image1 = gr.Image(
label="Image 1",
type="numpy",
image_mode="RGB",
height=300,
interactive=True,
)
with gr.Column():
output_keypoints = gr.Image(label="Keypoints", type="numpy")
app.queue().launch(
server_name="0.0.0.0",
server_port=6329,
share=False,
)
Then you upload two images with different heights.
Screenshot
Logs
No response
System Info
Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.28.3
gradio_client version: 0.16.0
------------------------------------------------
gradio dependencies in your environment:
aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.110.1
ffmpy: 0.3.2
gradio-client==0.16.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.22.2
importlib-resources: 6.4.0
jinja2: 3.1.2
markupsafe: 2.1.5
matplotlib: 3.7.1
numpy: 1.23.5
orjson: 3.10.0
packaging: 24.0
pandas: 2.0.3
pillow: 10.3.0
pydantic: 2.7.0
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0
ruff: 0.3.7
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.1
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.
gradio_client dependencies in your environment:
fsspec: 2024.3.1
httpx: 0.27.0
huggingface-hub: 0.22.2
packaging: 24.0
typing-extensions: 4.11.0
websockets: 11.0.3
Describe the bug
I'm attempting to control the height of images in
gr.Image
to display images of different heights at the same height by settingheight=300
. However, when I input two images of different sizes into Gradio, the icons for the image sources are not displayed with equal heights. As shown in the attached screenshot, the icon for the image source on the right exceeds the boundaries of its container. I would appreciate any suggestions or solutions to address this issue. Thank you.Have you searched existing issues? 🔎
Reproduction
Then you upload two images with different heights.
Screenshot
Logs
No response
System Info
Severity
I can work around it