<img>标记和 CSS - 如何通过将图像缩小到可用高度来停止溢出

Question

我一直在尝试在 Yew + tauri 中制作图像查看器组件。 我正在为我的 css 使用 tailwindcss。我有一个列 flexbox：

#[function_component]
pub fn ImageViewer() -> Html {

    html!(
        <div 
         class="flex gap-2 flex-col items-stretch">
                <div
                 class="p-2 flex-1 rounded bg-blue-400 bg-opacity-5 bg-blend-overlay
                        flex justify-center">
                    <img class="w-auto h-full object-scale-down" src="https://asat.gr/wp-content/uploads/2019/10/cropped-LOGO-12.2-1.png"/>
                </div>
                <p class="rounded text-blue-400 bg-blue-400 bg-opacity-5 bg-blend-overlay">
                    {"This is important information about the image"}
                </p>
        </div>
    )

}

图像包含在一个 div 中。 主要标签是：

#[function_component]
pub fn App() -> Html {
    html! { 
        <main class="h-screen max-h-screen overflow-hidden p-2 flex gap-2 flex-col align-bottom justify-start bg-slate-900">
                <ImageViewer/>
        </main>
    }
}

我已经在<img>标签和<div>标签上尝试了所有的object-x选项。 我已经在两个标签上尝试了h-full 、 w-auto 、 h-auto 、 w-full和max-变体。 我还尝试了aspect-square class，因为我的目标是拥有一个适合 window 且没有溢出的正方形图像查看器，无论 window 的长宽比如何。现在 $> 1$ 长宽比可怕地溢出（使用图像）和 $< 1$ 做我想要的。 对于 $>1$ 图像的方形长宽比可以通过仅在中间居中来保留。 在此之后我束手无策。 看起来是一个如此简单的问题，但无论我给它贴什么标签，它都不符合我的意愿。 作为附带问题：为什么 CSS 这么笨重？

Answer 1

经过多次摆弄和尝试解决由 flexbox 的项目溢出其父级引起的问题后，我设法通过将relative class 添加到包含img标签的div并将absolute class 添加到img标签来获得所需的结果，如建议的那样在这个答案中。 我在这个顺风游乐场展示了结果。 第二个答案不起作用，如playground中所示（我希望我理解正确）。 答案 1也不起作用。 我认为这是通过使div尺寸看起来“锁定”到包含的img来实现的，因此它不能再导致其父级扩展。

注意：根据帮助我的答案的作者，自从 flexbox 得到广泛支持以来，该问题的第一个答案现在是最佳答案，但由于某种原因在这里不起作用。 我从来没有费心去学习相对和绝对定位，因为我只是在各处使用 flexbox，而且似乎我不应该这样做。

旁注：我刚刚进入整个 web 的事情，在所有涉及的技术中，CSS 是大多数时候让我感到困惑的技术。 我想你必须坐下来尊重它有其自身的复杂性，应该像所有其他涉及的语言一样认真对待。