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`
`
+ html += lychee.html``
} else {
- html += lychee.html``
+ html += lychee.html``
}
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 -------------------------------------------------------------- //