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