diff --git a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
index 40efd715..9e2a9a1b 100644
--- a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
@@ -1,30 +1,30 @@
 <div class="content">
   <div class="row">
-    <div class="col-sm-12">
+    <div class="col-xs-12">
       <h1>Info</h1>
     </div>
   </div>
   <div class="row">
-    <div class="col-sm-2">
+    <div class="col-xs-2">
       <span class="details-icon glyphicon glyphicon-picture"></span>
     </div>
-    <div class="col-sm-10">
+    <div class="col-xs-10">
       <div class="details-main">
         {{photo.name}}
       </div>
       <div class="details-sub">
-        <div class="col-sm-4">{{photo.metadata.size.width}} x {{photo.metadata.size.height}}</div>
-        <div class="col-sm-4">{{calcMpx()}}MP</div>
-        <div class="col-sm-4" *ngIf="photo.metadata.fileSize">{{calcFileSize()}}</div>
+        <div class="col-xs-4">{{photo.metadata.size.width}} x {{photo.metadata.size.height}}</div>
+        <div class="col-xs-4">{{calcMpx()}}MP</div>
+        <div class="col-xs-4" *ngIf="photo.metadata.fileSize">{{calcFileSize()}}</div>
       </div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-sm-2">
+    <div class="col-xs-2">
       <span class="details-icon glyphicon glyphicon-calendar"></span>
     </div>
-    <div class="col-sm-10">
+    <div class="col-xs-10">
       <div class="details-main">
         {{getDate()}}
         <ng-container *ngIf="getYear() !== getCurrentYear()">
@@ -32,43 +32,43 @@
         </ng-container>
       </div>
       <div class="details-sub">
-        <div class="col-sm-12">{{getDay()}}, {{getTime()}}</div>
+        <div class="col-xs-12">{{getDay()}}, {{getTime()}}</div>
       </div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-sm-2">
+    <div class="col-xs-2">
       <span class="details-icon glyphicon glyphicon-camera"></span>
     </div>
-    <div class="col-sm-10">
+    <div class="col-xs-10">
       <div class="details-main">
         {{photo.metadata.cameraData.model || photo.metadata.cameraData.make || "Camera"}}
       </div>
       <div class="details-sub">
-        <div class="col-sm-3" *ngIf="photo.metadata.cameraData.ISO">ISO{{photo.metadata.cameraData.ISO}}</div>
-        <div class="col-sm-3" *ngIf="photo.metadata.cameraData.fStop">f/{{photo.metadata.cameraData.fStop}}</div>
-        <div class="col-sm-3" *ngIf="photo.metadata.cameraData.exposure">
+        <div class="col-xs-3" *ngIf="photo.metadata.cameraData.ISO">ISO{{photo.metadata.cameraData.ISO}}</div>
+        <div class="col-xs-3" *ngIf="photo.metadata.cameraData.fStop">f/{{photo.metadata.cameraData.fStop}}</div>
+        <div class="col-xs-3" *ngIf="photo.metadata.cameraData.exposure">
           {{toFraction(photo.metadata.cameraData.exposure)}}s
         </div>
-        <div class="col-sm-3" *ngIf="photo.metadata.cameraData.focalLength">
+        <div class="col-xs-3" *ngIf="photo.metadata.cameraData.focalLength">
           {{photo.metadata.cameraData.focalLength}}mm
         </div>
-        <div class="col-sm-12" *ngIf="photo.metadata.cameraData.lens">{{photo.metadata.cameraData.lens}}</div>
+        <div class="col-xs-12" *ngIf="photo.metadata.cameraData.lens">{{photo.metadata.cameraData.lens}}</div>
       </div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-sm-2">
+    <div class="col-xs-2">
       <span class="details-icon glyphicon glyphicon-map-marker"></span>
     </div>
-    <div class="col-sm-10">
+    <div class="col-xs-10">
       <div class="details-main">
         {{getPositionText() || "Position"}}
       </div>
       <div class="details-sub" *ngIf="hasGPS()">
-        <div class="col-sm-12">
+        <div class="col-xs-12">
           {{photo.metadata.positionData.GPSData.latitude.toFixed(3)}},
           {{photo.metadata.positionData.GPSData.longitude.toFixed(3)}}
         </div>
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
index 0816a2c8..16dac073 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@@ -7,13 +7,13 @@
   <div class="lightbox" #lightbox>
     <gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
                             [loadImage]="!animating"
+                            [windowAspect]="getPhotoFrameWidth()/getPhotoFrameHeight()"
                             #photo>
     </gallery-lightbox-photo>
   </div>
-
   <div
     *ngIf="controllersVisible"
-    id="controllers-container" #controls [style.width.px]="getScreenWidth()"
+    id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()"
     [ngClass]="!controllersDimmed ? 'dim-controls':  ''">
     <div class="controls controls-top">
       <a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
index 1b2be908..a6b0e456 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
@@ -26,7 +26,6 @@ import {Observable} from "rxjs/Observable";
 })
 export class GalleryLightboxComponent implements OnDestroy {
   @Output('onLastElement') onLastElement = new EventEmitter();
-  @ViewChild("root") elementRef: ElementRef;
   @ViewChild("photo") photoElement: GalleryLightboxPhotoComponent;
   @ViewChild("lightbox") lightboxElement: ElementRef;
 
@@ -46,7 +45,7 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   public infoPanelVisible = false;
   public infoPanelWidth = 0;
-  public animating = false
+  public animating = false;
 
 
   constructor(public fullScreenService: FullScreenService,
@@ -122,7 +121,7 @@ export class GalleryLightboxComponent implements OnDestroy {
     let to = this.activePhoto.getDimension();
 
     //if target image out of screen -> scroll to there
-    if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
+    if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getPhotoFrameHeight() < to.top) {
       this.setBodyScrollTop(to.top);
     }
 
@@ -150,8 +149,8 @@ export class GalleryLightboxComponent implements OnDestroy {
       <Dimension>{
         top: 0,
         left: 0,
-        width: this.getScreenWidth(),
-        height: this.getScreenHeight()
+        width: this.getPhotoFrameWidth(),
+        height: this.getPhotoFrameHeight()
       });
 
 
@@ -177,8 +176,8 @@ export class GalleryLightboxComponent implements OnDestroy {
     this.animateLightbox(<Dimension>{
       top: 0,
       left: 0,
-      width: this.getScreenWidth(),
-      height: this.getScreenHeight()
+      width: this.getPhotoFrameWidth(),
+      height: this.getPhotoFrameHeight()
     }, lightboxDimension).onDone(() => {
 
       this.visible = false;
@@ -206,8 +205,8 @@ export class GalleryLightboxComponent implements OnDestroy {
   animateLightbox(from: Dimension = <Dimension>{
     top: 0,
     left: 0,
-    width: this.getScreenWidth(),
-    height: this.getScreenHeight()
+    width: this.getPhotoFrameWidth(),
+    height: this.getPhotoFrameHeight()
   }, to: Dimension = from): AnimationPlayer {
     const elem = this._builder.build([
       style(<any>Dimension.toString(from)),
@@ -289,14 +288,14 @@ export class GalleryLightboxComponent implements OnDestroy {
     this.animateLightbox(<Dimension>{
         top: 0,
         left: 0,
-        width: this.getScreenWidth() + 400,
-        height: this.getScreenHeight()
+        width: this.getPhotoFrameWidth() + 400,
+        height: this.getPhotoFrameHeight()
       },
       <Dimension>{
         top: 0,
         left: 0,
-        width: this.getScreenWidth(),
-        height: this.getScreenHeight()
+        width: this.getPhotoFrameWidth(),
+        height: this.getPhotoFrameHeight()
       });
     if (this.iPvisibilityTimer != null) {
       clearTimeout(this.iPvisibilityTimer);
@@ -319,14 +318,14 @@ export class GalleryLightboxComponent implements OnDestroy {
       this.animateLightbox(<Dimension>{
           top: 0,
           left: 0,
-          width: this.getScreenWidth() - 400,
-          height: this.getScreenHeight()
+          width: this.getPhotoFrameWidth() - 400,
+          height: this.getPhotoFrameHeight()
         },
         <Dimension>{
           top: 0,
           left: 0,
-          width: this.getScreenWidth(),
-          height: this.getScreenHeight()
+          width: this.getPhotoFrameWidth(),
+          height: this.getPhotoFrameHeight()
         });
     }
   }
@@ -340,11 +339,11 @@ export class GalleryLightboxComponent implements OnDestroy {
     window.scrollTo(window.scrollX, value);
   }
 
-  private getScreenWidth() {
+  private getPhotoFrameWidth() {
     return Math.max(window.innerWidth - this.infoPanelWidth, 0);
   }
 
-  private getScreenHeight() {
+  private getPhotoFrameHeight() {
     return window.innerHeight;
   }
 
@@ -352,15 +351,17 @@ export class GalleryLightboxComponent implements OnDestroy {
   private calcLightBoxPhotoDimension(photo: PhotoDTO): Dimension {
     let width = 0;
     let height = 0;
-    if (photo.metadata.size.height > photo.metadata.size.width) {
-      width = Math.round(photo.metadata.size.width * (this.getScreenHeight() / photo.metadata.size.height));
-      height = this.getScreenHeight();
+    const photoAspect = photo.metadata.size.width / photo.metadata.size.height;
+    const windowAspect = this.getPhotoFrameWidth() / this.getPhotoFrameHeight();
+    if (photoAspect < windowAspect) {
+      width = Math.round(photo.metadata.size.width * (this.getPhotoFrameHeight() / photo.metadata.size.height));
+      height = this.getPhotoFrameHeight();
     } else {
-      width = this.getScreenWidth();
-      height = Math.round(photo.metadata.size.height * (this.getScreenWidth() / photo.metadata.size.width));
+      width = this.getPhotoFrameWidth();
+      height = Math.round(photo.metadata.size.height * (this.getPhotoFrameWidth() / photo.metadata.size.width));
     }
-    let top = (this.getScreenHeight() / 2 - height / 2);
-    let left = (this.getScreenWidth() / 2 - width / 2);
+    let top = (this.getPhotoFrameHeight() / 2 - height / 2);
+    let left = (this.getPhotoFrameWidth() / 2 - width / 2);
 
     return <Dimension>{top: top, left: left, width: width, height: height};
   }
@@ -385,6 +386,7 @@ export class GalleryLightboxComponent implements OnDestroy {
     this.controllersDimmed = false;
   };
 
+
   public pause() {
     if (this.timerSub != null) {
       this.timerSub.unsubscribe();
@@ -393,7 +395,6 @@ export class GalleryLightboxComponent implements OnDestroy {
   }
 
   public play() {
-    console.log("play");
     this.pause();
     this.timerSub = this.timer.filter(t => t % 2 == 0).subscribe(() => {
       if (this.navigation.hasNext) {
@@ -406,7 +407,6 @@ export class GalleryLightboxComponent implements OnDestroy {
   }
 
   public fastForward() {
-    console.log("fastForward");
     this.pause();
     this.timerSub = this.timer.subscribe(() => {
       if (this.navigation.hasNext) {
diff --git a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
index 2f4d7a0b..d3e2027b 100644
--- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
@@ -10,6 +10,7 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
 
   @Input() gridPhoto: GridPhoto;
   @Input() loadImage: boolean = false;
+  @Input() windowAspect: number = 1;
 
   public imageSize = {width: "auto", height: "100"};
 
@@ -29,7 +30,10 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
       return;
     }
 
-    if (this.gridPhoto.photo.metadata.size.height > this.gridPhoto.photo.metadata.size.width) {
+
+    const photoAspect = this.gridPhoto.photo.metadata.size.width / this.gridPhoto.photo.metadata.size.height;
+
+    if (photoAspect < this.windowAspect) {
       this.imageSize.height = "100";
       this.imageSize.width = null;
     } else {