Question 225669 in Html Question posted in
Some basic documentation can be found here.

Html – Img overflows its container

I’m creating a dialog that should take full width and height of the screen.
Its content should be divided to two parts – image and footer area. Footer area should be 2 rows high and the image area should take the rest of the parent.
Using tailwindcss I tried to do this, however the image overflows its container and takes height of the whole dialog. When I commented the image out and put a <div> in there with same class w-full h-full it took exactly the space I wanted. How to achieve the same with the <img> tag?

<dialog
    bind:this={dialog}
    class="w-screen h-screen rounded-xl bg-surface-50 mx-auto my-auto overflow-hidden border-0" tabindex="-1"
    onclick="event.target==this && this.close()"
>
    <div class="w-full h-full flex flex-col relative border-0" tabindex="-1">
        <div class="flex-grow">
            <img src={image?.s3_path} alt="fotka" class="object-contain h-full w-full">
            <!-- <div class="w-full h-full bg-primary-400"></div> -->
        </div>
        <div class="w-full h-12">
            x
        </div>
    </div>
</dialog>

I also tried fiddling around removing the h-full, using h-auto and so on.

Thank you very much for any help.

Tags:

2

Answers


  1. 0

    To make sure the image takes the remaining space within the dialog and doesn’t overflow, you can use a combination of flex and max-height utilities from Tailwind CSS.

    Here is your updated code:

    <dialog
    bind:this={dialog}
    class="w-screen h-screen rounded-xl bg-surface-50 mx-auto my-auto overflow-hidden border-0" tabindex="-1"
    onclick="event.target==this && this.close()"
>
    <div class="w-full h-full flex flex-col relative border-0" tabindex="-1">
        <div class="flex-grow overflow-hidden">
            <img src={image?.s3_path} alt="fotka" class="object-contain w-full max-h-full">
            <!-- <div class="w-full h-full bg-primary-400"></div> -->
        </div>
        <div class="w-full h-12">
            x
        </div>
    </div>
</dialog>

    I replaced h-full with max-h-full in the tag’s class. This ensures that the image will take up the full width of its container (w-full) while respecting its aspect ratio and not overflowing. The overflow-hidden class on the parent also helps in containing the image within its boundaries.

    Login or Signup to reply.
  2. 0

    Try to replace the h-full with a specific height that you want for the image container, and set the object-contain class.

    Maybe like this?

    <dialog
    bind:this={dialog}
    class="w-screen h-screen rounded-xl bg-surface-50 mx-auto my-auto overflow-hidden border-0" tabindex="-1"
    onclick="event.target==this && this.close()">
    <div class="w-full h-full flex flex-col relative border-0" tabindex="-1">
        <div class="flex-grow relative">
            <img src={image?.s3_path} alt="fotka" class="absolute inset-0 object-contain w-full h-full">
        </div>
        <div class="w-full h-12">
            x
        </div>
    </div>
</dialog>

    Here I made the div containing the image relative, and the image absolute so that it fills the entire parent div. I also maintained the object-contain class to keep the aspect ratio of the image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search