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

  • 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

ScaleImage - Vaadin Add-on Directory

Like Image, but uses DIV + CSS background not IMG element. ScaleImage - Vaadin Add-on Directory
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...
Online Demo
Source Code
Author Homepage
Issue Tracker

ScaleImage version 0.1.0
Initial release

ScaleImage version 0.2.0
- Undefined size now allowed. This as it's good to allow setting size at CSS, without need to use !important. - Protected way to modify CSS values. Just for those people that know what they are doing. - Change to default styling. Now background image is set to center, with contain size and no repeating. - Removed debug printing left behind

ScaleImage version 0.2.2
Adds missing click listener interface to ScaleImage

ScaleImage version 0.2.3
Adds display: inline-block to default theming to improve ScaleImage behaviour inside non CssLayouts, when alignment is used (fixed to 0.2.3) Adds missing click listener interface to ScaleImage (fixed to 0.2.2)

ScaleImage version 0.2.4
Fix clicking inside parent layout with clicklisteners

ScaleImage version 0.3.0
- OSGi bundled - Moved to use SCSS theming (make sure you have addons.scss generated and included to your theme)

ScaleImage version 0.4.0
0.4.0 is for Vaadin 8, use 0.3.x versions with Vaadin 7

ScaleImage version 0.4.1
Now most of CSS background properties can be defined with server Java API.

ScaleImage version 0.5.0
- 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

Online