Question

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

Answer 1

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

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

Answer 2

使用css可以强制执行最大宽度和高度，以达到理想的效果。

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

@mixin mytheme {
  @include valo;

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

}

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

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

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

HTHS！

Answer 3

我遇到过同样的问题。我必须建立自己的逻辑，根据浏览器的像素宽度调整图像的高度和宽度。我不相信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;
    }

希望有所帮助。

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

3 个答案: