From b5e69ec7548d2ea728d20de150d67cc31d9cb1a3 Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Thu, 10 Mar 2016 23:10:06 +0100
Subject: [PATCH] New way to center the image in the imageview

---
 src/scripts/build.js       |  4 ++--
 src/styles/_imageview.scss | 26 +++++++++-----------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/scripts/build.js b/src/scripts/build.js
index 4b1f020..620d36f 100644
--- a/src/scripts/build.js
+++ b/src/scripts/build.js
@@ -120,11 +120,11 @@ build.imageview = function(data, visibleControls) {
 
 	if (hasMedium===false) {
 
-		html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }' draggable='false'></div></div>`
+		html += lychee.html`<img id='image' class='$${ visibleControls===true ? '' : 'full' }' src='$${ data.url }' draggable='false'>`
 
 	} else {
 
-		html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }' srcset='$${ data.medium } 1920w, $${ data.url } $${ data.width }w' draggable='false'></div></div>`
+		html += lychee.html`<img id='image' class='$${ visibleControls===true ? '' : 'full' }' src='$${ data.url }' srcset='$${ data.medium } 1920w, $${ data.url } $${ data.width }w' draggable='false'>`
 
 	}
 
diff --git a/src/styles/_imageview.scss b/src/styles/_imageview.scss
index b376386..d50dc57 100644
--- a/src/styles/_imageview.scss
+++ b/src/styles/_imageview.scss
@@ -21,21 +21,25 @@
 		right: 30px;
 		bottom: 30px;
 		left: 30px;
-		transition: top .3s, right .3s, bottom .3s, left .3s;
+		margin: auto;
+		max-width: calc(100% - 60px);
+		max-height: calc(100% - 90px);
+		width: auto;
+		height: auto;
+		transition: top .3s, right .3s, bottom .3s, left .3s, max-width .3s, max-height .3s;
 		will-change: transform;
 
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
 		animation-name: zoomIn;
 		animation-duration: .3s;
 		animation-timing-function: $timingBounce;
 
 		@media (max-width: 640px) {
+			top: 60px;
 			right: 20px;
 			bottom: 20px;
 			left: 20px;
+			max-width: calc(100% - 40px);
+			max-height: calc(100% - 80px);
 		}
 	}
 
@@ -44,20 +48,8 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-	}
-
-	#image > div {
-		width: 0;
-		height: 0;
-	}
-
-	#image img {
-		position: absolute;
 		max-width: 100%;
 		max-height: 100%;
-		width: auto;
-		height: auto;
-		transform: translate(-50%, -50%);
 	}
 
 	// Previous/Next Buttons -------------------------------------------------------------- //