famous-bkimagesurface

BkImageSurface adds support for sizing-strategies such as AspectFit and AspectFill for displaying images with famo.us. It uses a 'div' with a background-image rather than a 'img' tag.

Can be used as a drop-in replacement for ImageSurface, in case the size of the div is not derived from the image.

Demo

View the demo here

Getting started

Install using bower or npm:

bower install famous-bkimagesurface

npm install famous-bkimagesurface

Example of how to create a BkImageSurface:

var BkImageSurface = require('famous-bkimagesurface');
 
var imageSurface = new BkImageSurface({
    content: 'myimage.png',
    sizeMode: BkImageSurface.SizeMode.ASPECTFILL
});
this.add(imageSurface);

all possible modes:

var imageSurface = new BkImageSurface({
    content: 'myimage.png',
    sizeMode: BkImageSurface.SizeMode.ASPECTFILL,
    positionMode: BkImageSurface.PositionMode.TOP,
    repeatMode: BkImageSurface.RepeatMode.NONE
});
this.add(imageSurface);

using css-style values directly:

var imageSurface = new BkImageSurface({
    content: 'myimage.png',
    sizeMode: '100px 50%',
    positionMode: 'center center',
    repeatMode: 'repeat-x'
});
this.add(imageSurface);

using the setter-functions:

var imageSurface = new BkImageSurface();
imageSurface.setContent('http://www.myimage.png');
imageSurface.setSizeMode(BkImageSurface.SizeMode.ASPECTFIT);
imageSurface.setPositionMode(BkImageSurface.PositionMode.RIGHT);
imageSurface.setRepeatMode(BkImageSurface.RepeatMode.VERTICAL);

Documentation

The size-, position- and repeat- modes correspond directly to the following css-styles:

Mode	CSS-style
SizeMode	background-size
PositionMode	background-position
RepeatMode	background-repeat

According to your liking you can choose to use either the Mode-definitions or CSS-styles directly.

Size-modes

Mode	Value	Description
SizeMode.AUTO	auto	Keeps the original image dimensions.
SizeMode.FILL (default)	100% 100%	Fills the image to the size of the div.
SizeMode.ASPECTFILL	cover	Fills the div with the image while keeping correct image aspect ratio (crops if neccesary).
SizeMode.ASPECTFIT	contain	Fits the whole image in the div while keeping correct image aspect ratio.

Position-modes

Mode	Value	Description
PositionMode.CENTER (default)	center center	Centers the image in the div.
PositionMode.LEFT	left center	Left aligns the image in the div.
PositionMode.RIGHT	right center	Right aligns the image in the div.
PositionMode.TOP	center top	Top aligns the image in the div.
PositionMode.BOTTOM	center bottom	Bottom aligns the image in the div.
PositionMode.TOPLEFT	left top	Aligns the image in the top-left corner of the div.
PositionMode.TOPRIGHT	right top	Aligns the image in the top-right corner of the div.
PositionMode.BOTTOMLEFT	left bottom	Aligns the image in the bottom-left corner of the div.
PositionMode.BOTTOMRIGHT	right bottom	Aligns the image in the bottom-right corner of the div.

Repeat-modes

Mode	Value	Description
RepeatMode.NONE (default)	no-repeat	No image-repeat.
RepeatMode.HORIZONTAL	repeat-y	Image is repeated horizontally.
RepeatMode.VERTICAL	repeat-x	Image is repeated vertically.
RepeatMode.BOTH	repeat	Image is repeated both horizontally and vertically.

API reference

Class	Description
BkImageSurface	Background image surface class.

Contribute

Feel free to contribute to this project in any way. The easiest way to support this project is by giving it a star.

Contact

• @IjzerenHein
• http://www.gloey.nl
• [e-mail]

© 2014 - Hein Rutjes