ScaleImage

Like Image, but uses DIV + CSS background not IMG element.

Simple addon to help when Image component's IMG tags become painful to theme. Provides ScaleImage that uses DIV with CSS property background-image on client side. This allows you to do some tricks with CSS, that would be really hard to do with IMG tag. Like repeating, positioning...

Sample code

// Creates image where image will be always contained inside available space.
// Image will be aligned to center of component
// Unallocated space will be colorred silver

ScaleImage image = new ScaleImage(new ThemeResource("images/myimage.jpg"));
image.setWidth(200, Unit.PIXELS);
image.setHeight(200, Unit.PIXELS);

// Option A: Applying CSS rules related to image position and size inside element
image.setCssValues(
    BackgroundSize.CONTAIN,
    BackgroundClip.PADDING_BOX,
    BackgroundOrigin.PADDING_BOX,
    BackgroundPositionX.CENTER,
    BackgroundPositionY.CENTER,
    new BackgroundColor("silver")
);

// Option B: Alternative way of doing the same as above
image.setBackgroundSize(BackgroundSize.CONTAIN)
     .setBackgroundClip(BackgroundClip.PADDING_BOX)
     .setBackgroundOrigin(BackgroundOrigin.PADDING_BOX)
     .setBackgroundPositionX(BackgroundPositionX.CENTER)
     .setBackgroundPositionY(BackgroundPositionY.CENTER)
     .setBackgroundColor(new BackgroundColor("silver"));

// Option C: use CSS styling in your theme. _This works also with older versions_.

// Give style name
image.addStyleName("my-special-snowflake");

Links

• Online Demo
• Source Code
• Author Homepage
• Issue Tracker

Compatibility