NGX-IMAGE-DIMENSION

Directive imageCenteredSize makes image centered, as background (background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;) but it is remains tag (<img src='#' alt="#">)

Getting Started

To get started, install it from npm:

npm i ngx-image-dimension

Usage

Import NgxImageDimensionModule to your application module.

1...
2import {NgxImageDimensionModule} from 'ngx-image-dimension';
3...
4
5 ...
6@NgModule({
7  imports: [...,NgxImageDimensionModule]
8  })
9  ...

CSS

Add this css to your css file

1.wh {
2  height: 100% !important
3}
4
5.ww {
6  width: 100% !important
7}
8

View

Use in template like below

1<div style="width: 200px; height: 200px; overflow: hidden;" imageCenteredSize>
2    <img src="http://kb4images.com/images/image/37184284-image.jpg" alt="">
3</div>