Directory

← Back

ScaleImage

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

Author

Rating

Popularity

<100

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");

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • OSGi bundled
  • Moved to use SCSS theming (make sure you have addons.scss generated and included to your theme)
Released
2016-04-06
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.1+
Vaadin 8.0+ in 0.4.1
Browser
Internet Explorer
Internet Explorer
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online