css Img溢出其容器

smtd7mpg 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(106)

我正在创建一个对话框，它应该占据整个屏幕的宽度和高度。其内容应分为两部分-图像和页脚区域。页脚区域应为2行高，图像区域应占父区域的其余部分。我使用tailwindcss尝试这样做，但是图像溢出了它的容器并占据了整个对话框的高度。当我把图片注解掉，并把一个<div>和一个类w-full h-full放在一起时，它占用了我想要的空间。如何使用<img>标签实现相同的功能？

<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>

字符串
我还尝试了移除h-full，使用h-auto等等。
非常感谢你的帮助。

css

来源：https://stackoverflow.com/questions/76859740/img-overflows-its-container

2条答案

按热度按时间

gudnpqoy1#

要确保图像占用对话框中的剩余空间并且不会溢出，您可以使用Tailwind CSS中的flex和max-height工具的组合。
下面是你的更新代码：

<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>

字符串
我把标签类中的h-full替换为max-h-full。这确保图像将占据其容器的整个宽度（w-full），同时尊重其纵横比并且不溢出。父级上的溢出隐藏类也有助于将图像包含在其边界内。

赞(0）回复(0）举报 2023-08-08

myzjeezk2#

尝试将h-full替换为图像容器所需的特定高度，并设置object-contain类。
像这样？

<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>

字符串
在这里，我创建了包含图像的相对div和图像的绝对div，以便它填充整个父div。我还维护了object-contain类来保持图像的纵横比。

赞(0）回复(0）举报 2023-08-08

我来回答

css Img溢出其容器

2条答案

相关问题

热门标签

最新问答