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

Question

I have an Image component which I'd like to define the size of 500px by 500px. The problem I have is that my image isn't a square but I'd like to keep the aspect ratio when pushing in the StreamResource to my Image component. How can I do this other than resizing the image manually? In other words is there something within the Image component that allows me to automatically re-size the image without forcing it to become a square?

Answer 1

The solution I ended up with was to resize the image before sending it to the UI. In other words I do some calculations where if the image is larger then 500, I then look to see if it's the height or width, and then use whichever is the largest as the baseline. I then multiple the aspect ratio to the other dimension and convert the image accordingly.

So for example if I have an image that's 800x600 I will then assume use 800 as the baseline, meaning that 500/800 meaning that the image has to be reduced to 62.5% of it's size. I then reduce 600 by 62.5%, as in 600 * 0.625 = 375. Therefore I resize the image using my image library to 500x375. And if the image was 600x800 I would then resize it to 375x500. In other words I pre-process the image and rely on anything within the GUI to manage this for me.

Answer 2

Using css you can enforce a max width and height to achieve your desired look.

First edit your mytheme.scss file and add a css entry. Should look something like this

@mixin mytheme {
  @include valo;

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

}

To apply this rule via code use addStyleName and set the size to undefined. Ex:

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

Now build, re-run your project, and you should be g2g.

hths!

Answer 3

I've run into this same issue. I've had to build my own logic to resize the height and width of the image(s) based on the pixel width of browser. I do not believe there is anything out of the box in Vaadin that can handle this.

Something like this:

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

Hope that helps.