GWT-设置相对于屏幕宽度的面板高度？

我正在尝试创建一个布局面板，跨越用户屏幕的宽度，其中将包含4个图像。无论屏幕高度如何，这些图像都应按其宽度成比例缩放。例如：

Landscape:
+----+----+----+----+
| i1 | i2 | i3 | i4 |
|    |    |    |    |
+----+----+----+----+
|                   |
+-------------------+

Portrait:
+--+--+--+--+
|i1|i2|i3|i4|
+--+--+--+--+
|           |
|           |
|           |
+-----------+

我试图通过将一个面板设置为屏幕的宽度来实现这一点。看来效果不错。但是当我尝试设置高度相对于宽度时，高度始终保持为零

我通过eclipse插件使用GWT。我曾尝试在任何给定的时间使用一些换行符来获取变量，但我似乎无法让换行符执行任何操作（在编译期间以…运行，以…调试）。但是，无法使调试工作正常是另一个问题

下面是我正在使用的代码。如果有人知道我做错了什么，请告诉我。多谢各位

public void onModuleLoad() {
    int layout_panel_width;
    int layout_panel_height;
    RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
    rootLayoutPanel.setSize("100%", "100%");

    LayoutPanel layoutPanel = new LayoutPanel();
    rootLayoutPanel.add(layoutPanel);
    rootLayoutPanel.setWidgetLeftWidth(layoutPanel, 0.0, Unit.PCT, 100.0, Unit.PCT);
    layout_panel_width = layoutPanel.getOffsetWidth();
    layout_panel_height = layout_panel_width * 70 / 128;
    rootLayoutPanel.setWidgetTopHeight(layoutPanel, 0.0, Unit.PCT, layout_panel_height, Unit.PX);

    LayoutPanel lp1 = new LayoutPanel();
    layoutPanel.add(lp1);
    layoutPanel.setWidgetLeftWidth(lp1, 0.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp1, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i1 = new Image("images/single_test_sprite.png");
    lp1.add(i1);
    lp1.setWidgetLeftWidth(i1, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp1.setWidgetTopHeight(i1, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp2 = new LayoutPanel();
    layoutPanel.add(lp2);
    layoutPanel.setWidgetLeftWidth(lp2, 25.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp2, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i2 = new Image("images/single_test_sprite.png");
    lp2.add(i2);
    lp2.setWidgetLeftWidth(i2, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp2.setWidgetTopHeight(i2, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp3 = new LayoutPanel();
    layoutPanel.add(lp3);
    layoutPanel.setWidgetLeftWidth(lp3, 50.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp3, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i3 = new Image("images/single_test_sprite.png");
    lp3.add(i3);
    lp3.setWidgetLeftWidth(i3, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp3.setWidgetTopHeight(i3, 0.0, Unit.PCT, 100.0, Unit.PCT);

    LayoutPanel lp4 = new LayoutPanel();
    layoutPanel.add(lp4);
    layoutPanel.setWidgetLeftWidth(lp4, 75.0, Unit.PCT, 25.0, Unit.PCT);
    layoutPanel.setWidgetTopHeight(lp4, 0.0, Unit.PCT, layout_panel_height, Unit.PX);
    Image i4 = new Image("images/single_test_sprite.png");
    lp4.add(i4);
    lp4.setWidgetLeftWidth(i4, 0.0, Unit.PCT, 100.0, Unit.PCT);
    lp4.setWidgetTopHeight(i4, 0.0, Unit.PCT, 100.0, Unit.PCT);
}

这就是您需要的：

public void onModuleLoad() {
    RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();

    FlowPanel flowPanel = new FlowPanel();
    flowPanel.addStyleName("my_images_panel");
    rootLayoutPanel.add(flowPanel);

    Image i1 = new Image("images/single_test_sprite.png");
    Image i2 = new Image("images/single_test_sprite.png");
    Image i3 = new Image("images/single_test_sprite.png");
    Image i4 = new Image("images/single_test_sprite.png");

    flowPanel.add(i1);
    flowPanel.add(i2);
    flowPanel.add(i3);
    flowPanel.add(i4);
}

然后，在CSS文件中：

.my_images_panel img {
    float: left;
    width: 25%;
}

---

原始代码有问题（摘自答案注释）：

---

在浏览器完成渲染之前，每个小部件的宽度和高度都为零。您需要使用调度程序等待渲染完成，然后您可以使用

getOffsetSight（）

和

getOffsetWidth（）

感谢您的快速回复。因此，这可以使图像对齐并正确调整大小。但是，能够获得图像/面板的高度对我来说仍然很有用。是否有一种方法可以获取大小，并在onModuleLoad期间仍然使用它来设置另一个对象的大小？我的设计比我发布的简化版稍微复杂一点，如果有这个数字会很有用。谢谢另外，你知道/你能评论一下我原来的方法有什么问题吗？在浏览器完成渲染之前，每个小部件的宽度和高度都是零。您需要使用调度程序等待渲染完成，然后您可以使用

getOffsetHeight（）

和

getOffsetWidth（）

。啊，我明白了。这回答了我的两个评论问题。太好了，谢谢！