Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 913
Stephane Grenier Avatar asked Sep 19 '17 05:09

Stephane Grenier


People also ask

How do you keep aspect ratio when resizing?

Press-and-hold the Shift key, grab a corner point, and drag inward to resize the selection area. Because you're holding the Shift key as you scale, the aspect ratio (the same ratio as your original photo) remains exactly the same.


1 Answers

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.

like image 154
Stephane Grenier Avatar answered Oct 02 '22 07:10

Stephane Grenier