08 Jul An in-depth look at images in famo.us and sizing-modes
Famo.us supports various modes for setting the size of an image. As is true for all surfaces, you can set the values of the `size` array to any of these values:
- undefined (sets the width/height to same as its parent)
- true (sets the width/height to the real size of the image)
- number (sets the width/height to a fixed value in pixels)
This allows you to size the image in the following 8 ways:
Whilst very powerful, in some cases you may require additional methods. For instance, if you want to scale an image to fit the parent, you can use: [undefined, true] (or [true, undefined]). This will make the height-of the image fit in the parent. As long as the width of the image fits in the parent container, you are good. But if it doesn’t, then your image will be wider that your parent-container (which you probably don’t want). Also, in other scenarios you may want to fill a div entirely with an image, whilst keeping the correct aspect-ratio. This requires clipping the image, which can be achieved using a secondary RenderContext.
To deal with these limitations I wrote an Image-Surface for famo.us called BkImageSurface. Instead of using an <img>, it uses a regular <div> with a background-image. Using standard CSS styles ‘cover’ and ‘contain’, aspect-fit and aspect-fill can be achieved:
A more complete demo of all sizing-, positioning- and repeat-modes can be viewed here: famous-imageview/master/examples/demo/index.html
BkImageSurface source can be found here: github.com/IjzerenHein/famous-bkimagesurface
