如何在Vaadin中设置图像组件的大小并保持纵横比

Question

我有一个Image组件,我想定义500px到500px的大小.我的问题是我的图像不是正方形,但我想在将StreamResource推送到我的图像组件时保持纵横比.除了手动调整图像大小外,我该怎么做？换句话说,Image组件中是否有某些东西允许我自动重新调整图像大小而不强制它成为正方形？

Answer 1

我最终得到的解决方案是在将图像发送到用户界面之前调整图像大小。换句话说，我会进行一些计算，如果图像大于 500，我会查看它是高度还是宽度，然后使用最大的作为基线。然后，我将纵横比乘以另一个尺寸并相应地转换图像。

例如，如果我有一个 800x600 的图像，我将假设使用 800 作为基线，这意味着 500/800 意味着图像必须缩小到其大小的 62.5%。然后，我将 600 缩小 62.5%，如 600 * 0.625 = 375。因此，我使用图像库将图像大小调整为 500x375。如果图像是 600x800，我会将其大小调整为 375x500。换句话说，我预处理图像并依赖 GUI 中的任何内容来为我管理此图像。