import { Component, Input } from '@angular/core';
import { LazyLoadImageDirective } from '../src/lazyload-image.directive';

@Component({
    selector: 'image',
    styles: [`
        img {
            min-width: 1497px;
            width: 100%;
            min-height: 1127px;
            transition: opacity 1s;
            opacity: 0;
        }

        img.ng2-lazyloaded {
            opacity: 1;
        }
    `],
    template: `
        <img src="https://www.placecage.com/1000/1000" [lazyLoad]="image" offset="0">
    `,
    directives: [ LazyLoadImageDirective ]
})
class ImageComponent {
    @Input('src') image;
}

export { ImageComponent };

import { Component, Input } from '@angular/core';
import { LazyLoadImageDirective } from '../src/lazyload-image.directive';

@Component({
    selector: 'image',
    styles: [`
        img {
            width: 100%;
            min-height: 1000px;
            transition: opacity 1s;
            opacity: 0;
        }

        img.ng2-lazyloaded {
            opacity: 1;
        }
    `],
    template: `
        <img src="https://www.placecage.com/1000/1000" [lazyLoad]="image" offset="0">
    `,
    directives: [ LazyLoadImageDirective ]
})
class ImageComponent {
    @Input('src') image;
}

export { ImageComponent };

--- 
+++ 
@@ -5,8 +5,9 @@
     selector: 'image',
     styles: [`
         img {
+            min-width: 1497px;
             width: 100%;
-            min-height: 1000px;
+            min-height: 1127px;
             transition: opacity 1s;
             opacity: 0;
         }
:sparkles: Set a fix with and width on the image
