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?

Battles

Moving here, its always good to share what you've tried. Anyway, its true there is no superficial usage of aspect ratio in the API. This vaadin.com/api/7.3.5/com/google/gwt/resources/client/… though is a hint to how you can do it. – Antin

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.

Battles

Answer 2

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

First edit your mytheme.scssfile 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!

Vandal

So the image automatically stretches respecting the aspect ratio? – Stroke

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.

Dhumma

How does this help to solve the problem in the question? The solution should be independent from browser window size, and the question is about aspect ratio. – Stroke