Search code examples
javavaadinvaadin8

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


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?


Solution

  • 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.