heilbaum-ionic-object-fit-images

Ionic 2 directive to provide an object-fit CSS polyfill using object-fit-images.

Installation

1. Install via npm: npm install heilbaum-ionic-object-fit-images --save
2. Add ObjectFitImagesModule to src/app/app.modules.ts

   @NgModule({
      imports: [
          ObjectFitImagesModule
      ]
   })

Usage

Add directive attribute to image tag

<img alt="alternative" 
     src="path/to/image.jpg" 
     object-fit="cover"
     object-fit-watch-mq="true"
     object-position="50% 50%"
     title="title" />

Directives

heilbaum-ionic-object-fit-images provides three new directives.

• object-fit
• object-fit-watch-mq
• object-position

object-fit

Available attribute values:

• fill (default)
• contain
• cover
• none
• scale-down

Example: http://bfred-it.github.io/object-fit-images/demo/

object-fit-watch-mq

Add attribute object-fit-watch-mq="true" to img-tag if

• you are using scale-down or
• your media queries change the value of object-fit, like this

                              img { object-fit: cover }
  @media (max-width: 500px) { img { object-fit: contain } }

object-position

Attribute value is a , that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.
For more information read the MDN documentation.