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>...).
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
Given the sizes of an element and its parent:
containreturns the size to be applied to the element to let it fits its parent, still being fully visible and keeping its apect ratio.
coverreturns 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,
cover return the x and y positions of the element to center it in its parent container.
;/*Given an 50px 50px element in a 100px 200px parentTo be contains in its parent it must be of size 100px 100pxand be positioned at 0px 50px to be centered.*/let width height x y = ;console;//100 100 0 50/*Given an 50px 50px element in a 100px 200px parentTo be covered in its parent it must be of size 200px 200pxand be positioned at -50px 0px to be centered.*/let width height x y = ;console;//200 200 -50 0
Installation and usage
jspm install npm:contain-cover
You can also simply install it from npm
npm install contain-cover