gwt中的动态css背景图像

Question

我有一个包含一些优惠的页面，我想为每个优惠显示一张照片作为缩略图。缩略图图像具有固定的宽度和高度，因此我需要调整大小并裁剪原始图像。我想使用background-size: cover。

我的问题是我正在使用 GWT-Bootstrap，我需要有图像动态源。示例代码：

<b:Thumbnail size="3">
    <b:Image ui:field="image" />
    <b:Paragraph ui:field="text" />
    <b:Button ui:field="button" />
</b:Thumbnail>

对于每个优惠做：

@UiField Image image;

private void renderOffer(final Offer offer) {
    String photo = offer.getPHOTO();
        image.setUrl("images?img=" + photo);
    }
            ...
}

图像由 servlet 返回：

private void processRequest(HttpServletRequest request, HttpServletResponse response) throws IOException {
    String img = request.getParameter("img");
    ServletContext sc = getServletContext();

    String mimeType = sc.getMimeType(img);
    response.setContentType(mimeType);

    Properties parameters = ParametersLoader.getParameters();
    File file = new File(parameters.getProperty("imageUrlPath") + img);
    response.setContentLength((int)file.length());

    FileInputStream in = new FileInputStream(file);
    OutputStream out = response.getOutputStream();

    byte[] buf = new byte[1024];
    int count = 0;
    while ((count = in.read(buf)) >= 0) {
        out.write(buf, 0, count);
    }
    in.close();
    out.close();
}

如何将 <b:Image ui:field="image" /> 替换为 div 与 css 之类的：

.myDiv {
  background-image:  url(somehow received dynamic url?);
  background-size:   cover;  
  background-repeat: no-repeat;
}

Answer 1

您可以使用标签代替Image：

<b:Label ui:field="image" styleName="myDiv" />

在您的 CSS 中：

.myDiv {
  background-size:   cover;  
  background-repeat: no-repeat;
}

然后在你的代码中：

image.getElement().getStyle().setBackgroundImage("images?img=" + photo);