如何在Vaadin中設置圖像組件的大小並保持縱橫比

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

希望有所幫助。