Directory

← Back

ScaleImage

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

Author

Contributors

Rating

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

  • API has been cleaned up
  • Alternative text is now set as aria-label attribute on client side
  • Widgetset name to org.vaadin.alump.scaleimage.ScaleImageWidgetset
  • API to define background color
Released
2017-06-27
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.1+ in 0.3.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Windows Phone
Microsoft Edge
Online