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

Question

我有一个图像组件，我想定义 500px x 500px 的大小。我遇到的问题是我的图像不是正方形，但我想在将 StreamResource 推入我的图像组件时保持纵横比。除了手动调整图像大小外，我该怎么做？换句话说，图像组件中是否有一些东西可以让我自动调整图像大小而不强制它变成正方形？

Answer 1

我运行遇到过同样的问题。我不得不构建自己的逻辑来根据浏览器的像素宽度调整图像的高度和宽度。我不相信 Vaadin 中有任何开箱即用的东西可以处理这个问题。

像这样：

    if (browserWidth <= 1250){
        height = x;
        width = x;
    }else if (browserWidth <= 1500){
        height = x;
        width = x;
    }else if (browserWidth <= 1750){
        height = x;
        width = x;
    }else if (browserWidth <= 2000){
        height = x;
        width = x;
    }else {
        height = x;
        width = x;
    }

希望对您有所帮助。

Answer 2

使用 css 您可以强制设置最大宽度和高度以实现您想要的外观。

首先编辑您的 mytheme.scss 文件并添加一个 css 条目。应该看起来像这样

@mixin mytheme {
  @include valo;

  .maxSize500 {
    max-width: 500px;
    max-height: 500px;
  }

}

要通过代码应用此规则，请使用 addStyleName 并将大小设置为未定义。例如：

myImageComponent.setSizeUndefined(); // this line may not be needed in your project (it wasn't in mine)
myImageComponent.addStyleName("maxSize500");

现在构建，重新运行你的项目，你应该是g2g。

哎呀！

Answer 3

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

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

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

How to set the size of an Image component in Vaadin and keep the aspect ratio

java

vaadin

vaadin8