#270 When display an image should fit the screen

ng2-components/ng2-alfresco-viewer/src/imgViewer.component.css

@@ -0,0 +1,40 @@
+.viewer-image-row {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    box-orient: horizontal;
+    flex-direction: row;
+
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    box-pack: center;
+    justify-content: center;
+
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    box-align: center;
+    align-items: center;
+}
+
+.viewer-image-cell {
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+
+    padding: 10px;
+    margin: 10px;
+
+    text-align: center;
+}
+
+.viewer-image {
+    height: 80vh;
+    max-width:100%;
+}

ng2-components/ng2-alfresco-viewer/src/imgViewer.component.html

@@ -0,0 +1,8 @@
+<div class="viewer-image-content">
+    <div class="viewer-image-row">
+        <div class="viewer-image-cell">
+            <img src="{{urlFile}}"  alt="{{displayName}}" id="viewer-image" class="center-element viewer-image"/>
+        </div>
+    </div>
+</div>
+

ng2-components/ng2-alfresco-viewer/src/imgViewer.component.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from '@angular/core';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'img-viewer',
+    templateUrl: './imgViewer.component.html',
+    styleUrls: ['./imgViewer.component.css']
+})
+export class ImgViewerComponent {
+
+    @Input()
+    urlFile: string;
+
+    @Input()
+    nameFile: string;
+
+    ngOnChanges(changes) {
+        if (!this.urlFile) {
+            throw new Error('Attribute urlFile is required');
+        }
+    }
+}

ng2-components/ng2-alfresco-viewer/src/viewer.component.css

@@ -45,9 +45,8 @@
     z-index: 1000;
 }
 
-.viewer-image {
+img-viewer {
-    max-height: 100%;
+    height: 100%;
-    margin: auto;
 }
 
 .center-element {

ng2-components/ng2-alfresco-viewer/src/viewer.component.html

@@ -50,7 +50,9 @@
                             <div *ngIf="isPdf()">
                                 <pdf-viewer [urlFile]="urlFile" [nameFile]="displayName" ></pdf-viewer>
                             </div>
-                            <div *ngIf="isImage()" ><img src="{{urlFile}}"  id="viewer-image" class="center-element viewer-image"/></div>
+                            <div class="center-element" *ngIf="isImage()" >
+                                <img-viewer [urlFile]="urlFile" [nameFile]="displayName"></img-viewer>
+                            </div>
                             <div *ngIf="!supportedExtension()">
                                 <not-supported-format [urlFile]="urlFile" [nameFile]="displayName" ></not-supported-format>
                             </div>

ng2-components/ng2-alfresco-viewer/src/viewer.component.ts

@@ -17,6 +17,7 @@
 
 import { Component, ElementRef, Input, Output, HostListener, EventEmitter, Inject } from '@angular/core';
 import { PdfViewerComponent } from './pdfViewer.component';
+import { ImgViewerComponent } from './imgViewer.component';
 import { NotSupportedFormat } from './notSupportedFormat.component';
 import { DOCUMENT } from '@angular/platform-browser';
 
@@ -25,7 +26,7 @@ declare let __moduleName: string;
 @Component({
     moduleId: __moduleName,
     selector: 'alfresco-viewer',
-    directives: [PdfViewerComponent, NotSupportedFormat],
+    directives: [PdfViewerComponent, ImgViewerComponent, NotSupportedFormat],
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.css']
 })