Wondering what’s next for npm?Check out our public roadmap! »


    0.2.1 • Public • Published

    Contains and cover methods

    CSS provides two properties to fit an image inside its container : background-size for background images and object-fit for replaced element (<img>, <video>, <canvas>, <object>...).

    contain and cover are two possible values of these properties whose effects are described here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

    This JavaScript module exports two functions contain and cover.

    Given the sizes of an element and its parent:

    • contain returns the size to be applied to the element to let it fits its parent, still being fully visible and keeping its apect ratio.
    • cover returns the size to be applied to the element to let it fully fill its parent, keeping its aspect ratio and potentially overflowing vertically or horizontally.

    As a bonus, contain and cover return the x and y positions of the element to center it in its parent container.

    import { contain, cover } from "contain-cover";
    Given an 50px 50px element in a 100px 200px parent
    To be contains in its parent it must be of size 100px 100px
    and be positioned at 0px 50px to be centered.
    let { width, height, x, y } = contain(100, 200, 50, 50);
    console.log(width, height, x, y);
    //100 100 0 50
    Given an 50px 50px element in a 100px 200px parent
    To be covered in its parent it must be of size 200px 200px
    and be positioned at -50px 0px to be centered.
    let { width, height, x, y } = cover(100, 200, 50, 50);
    console.log(width, height, x, y);
    //200 200 -50 0

    Installation and usage

    This JavaScript file use ES6 Module format. You can use transpile it with TraceurJS and BabelJS. To use directly I suggest using JSPM.

    jspm install npm:contain-cover

    You can also simply install it from npm

    npm install contain-cover


    npm i contain-cover

    DownloadsWeekly Downloads






    Last publish


    • avatar