如何缩放图片避免溢出：Yew+Tauri图片查看器CSS问题

问题核心是要实现一个无论窗口宽高比如何，都能适配窗口且无溢出的正方形图片查看器。当前布局在窗口宽>高时图片溢出，原因是图片容器没有强制正方形比例，导致宽度不受约束，图片按高度拉伸时宽度超出容器。

修改方案 #

调整ImageViewer组件的样式，给图片容器添加正方形比例约束，并优化图片的缩放规则：

#[function_component]
pub fn ImageViewer() -> Html {
    html!(
        <div class="flex gap-2 flex-col items-stretch h-full">
            <div
                class="p-2 rounded bg-blue-400 bg-opacity-5 bg-blend-overlay
                       flex justify-center items-center flex-1 max-w-full aspect-square">
                <img class="max-w-full max-h-full object-contain" 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 p-2">
                {"This is important information about the image"}
            </p>
        </div>
    )
}

App组件保持原结构即可：

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

关键修改说明 #

• 给图片容器加aspect-square：强制容器宽高比为1:1，确保始终是正方形。
• 容器添加max-w-full：防止在宽窗口中，正方形容器的宽度超出父容器范围，避免横向溢出。
• 图片使用max-w-full max-h-full object-contain：让图片在正方形容器内按比例完整缩放，既不会被裁剪，也不会超出容器边界。
• 外层div加h-full：确保ImageViewer占满main的剩余空间，让flex-1能正确计算图片容器的可用高度。

这样修改后，无论窗口是宽屏还是竖屏，图片查看器都会保持正方形，且图片完整适配容器，不会出现溢出问题。

内容的提问来源于stack exchange，提问作者ShinyDemon