Gradio UI image output Config problem

🧨 Diffusers
1

So in any decent stable diffusion webui the generated output image always stays inside its canvas or idk container, no matter if the image resolutions are 512, 512 or like 408, 704… etc.
But in my custom Stable Diffusion code(using diffusers and gradio block ofc) as my image container is set to width and height, 500 and 500; if i generate an image as like 408, 704 then the bottom part of image view gets cut out.
So i’m searching for any css code or any solution so that i can always get any res image fit inside the container just like stable diffusion webui.
My code is below-

#@title # Stable Diffusion
import gradio as gr
import torch
import random
import sys

def txt2img(prompt, negative_prompt, width, height, num_inference_steps, guidance_scale, seed):
    pipe.safety_checker = None
    # Seed randomizer
    if seed == "":
        seed = random.randint(0, sys.maxsize)
    else:
        try:
            seed = int(seed)
        except ValueError:
            print("Invalid input. Please enter a valid number.")
            seed = None

    # Set seed for torch generator
    generator = torch.Generator("cuda").manual_seed(seed)

    # Assuming your_model_or_function is the function responsible for text-to-image generation
    image = pipe(prompt=prompt, negative_prompt=negative_prompt, num_inference_steps=num_inference_steps, height=height, width=width, guidance_scale=10, generator=generator).images[0]

    return image, seed

# Set default values for width and height
default_resolution = "200, 500"
number_choices = [1600, 1280, 704, 504, 408]
number_choicess = [1600, 1280, 704, 504, 408]

with gr.Blocks() as demo:
  gr.Markdown("StableDiffusion")
  with gr.Tab("Txt2Img"):
    with gr.Row():
      with gr.Column(scale=1):
        prompt = gr.Textbox(lines=1, label="Prompt")
        negative_prompt = gr.Textbox(lines=1, label="Negative Prompt")
        width = gr.Dropdown(choices=number_choices, value=704, label="Width")
        height = gr.Dropdown(choices=number_choicess, value=408, label="Height")
        num_inference_steps = gr.Slider(minimum=1, maximum=100, step=1, value=10, label="Steps")
        guidance_scale = gr.Slider(minimum=1, maximum=10, step=0.1, value=5, label="Guidance Scale")
        seed = gr.Textbox(label="Seed (Leave empty for random seed)")
      with gr.Column(scale=2):
        output_image = gr.Image(container=True, height=500, width=500)
        generate = gr.Button("Generate")
        output_seed = gr.Textbox(label="Current Seed")



    # Create the txt2img function
    generate.click(fn=txt2img, inputs=[prompt, negative_prompt, width, height, num_inference_steps, guidance_scale, seed], outputs=[output_image, output_seed])

# Launch the Gradio UI
demo.launch(share=True, debug=True)```