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
Compatibility
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.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