Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at I really love framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Meta Code | An in-depth look at images in and sizing-modes

An in-depth look at images in and sizing-modes

08 Jul An in-depth look at images in and sizing-modes 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 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: