Neovictorian Paisley Menswear

    famous-bkimagesurface

    1.0.3 • Public • Published

    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

    © 2014 - Hein Rutjes

    Install

    npm i famous-bkimagesurface

    DownloadsWeekly Downloads

    5

    Version

    1.0.3

    License

    none

    Last publish

    Collaborators

    • ijzerenhein