Fit image into panel

General
1

My problem is to fit an image into a Panel. I almost get one case out of two as desired. I attach a minimal maven project to build and run. I would like

  1. the H1-button to make the image fit horizontally
  2. the V1-button to make the image fit vertically, not extend below the browser window

In both cases it should have the scrollbar close to the image. My example has two classes of 33+103 lines of code but still almost all is template code. It builds a spring-boot executable by maven. The critical lines of code are just the following:

private void setInnerContent1() {
    Image img = getImage();
    if(horizontalFitting) {
        // Horizontal. This works
        img.setWidth("100%");
        VerticalLayout vl = new VerticalLayout();
        vl.setMargin(false);
        vl.addComponent(img);
        vl.setExpandRatio(img, 1.0f);
        left.setContent(vl);
    }
    else {
        // Vertical. This does not work !!!???
        img.setHeight("100%");
        HorizontalLayout hl = new HorizontalLayout();
        hl.setMargin(false);
        hl.addComponent(img);
        hl.setExpandRatio(img, 1.0f);
        left.setContent(hl);
    }
}

I puzzels me that horizontal fitting comes for free but vertical is so hard! In general I also have problems getting scrollbars at the place I desire. I would be very happy for any help!

18497215.gz (121 KB)

2

Hej Kare.

By default most layouts have an undefined height, allowing them to grow as needed. In this case you need to define their heights so you can set the image height to 100%. Percentage sizes are relative, so without a defined height on the parent, the calculation essentially becomes 100% of undefined, which won’t have an effect.

While I was at it, I removed a extra layouts and wrappers that complicated things unnecessarily.

PS. Your pom.xml seems to have some conflicting Vaadin versions, you might want to take a look at that

<dependency>
  <groupId>com.vaadin</groupId>
  <artifactId>vaadin</artifactId>
  <version>13.0.2</version>
</dependency>
<dependency>
  <groupId>com.vaadin</groupId>
  <artifactId>vaadin-server</artifactId>
  <version>8.11.2</version>
</dependency>

18498298.zip (129 KB)