如何在Vaadin中设置Image组件的大小并保持宽高比？

Question

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

- Stephane Grenier

---

来到这里，分享你尝试过的东西总是很好的。无论如何，在API中没有表面使用纵横比的说法是正确的。然而，https://vaadin.com/api/7.3.5/com/google/gwt/resources/client/ImageResource.ImageOptions.html 这个链接可以提示你如何实现它。 - Naman

Answer 1

我最终使用的解决方案是在将图像发送到UI之前调整其大小。换句话说，我进行一些计算，如果图像大于500，则查看其高度或宽度，然后使用其中较大的作为基准。然后我将纵横比乘以另一个尺寸并相应地转换图像。例如，如果我有一个800x600的图像，我将使用800作为基线，这意味着500/800即该图像必须缩小为其大小的62.5%。然后我将600减去62.5％，即600 * 0.625 = 375。因此，我使用我的图像库将图像调整为500x375。如果图像是600x800，则将其调整为375x500。换句话说，我预处理图像，并依靠GUI中的任何内容来管理它们。

- Stephane Grenier

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");

现在构建、重新运行你的项目，然后你就可以开始了。

祝一切顺利！

- petey

---

那么图像会自动按比例拉伸吗？ - Steffen Harbich

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;
    }

希望这可以帮到你。

- PeachesToad

---

这如何帮助解决问题？解决方案应该独立于浏览器窗口大小，而问题是关于纵横比的。 - Steffen Harbich