arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New way to center the image in the imageview

Browse Source
This commit is contained in:
Tobias Reich 2016-03-10 23:10:06 +01:00
parent d68d84e4e5
commit b5e69ec754
2 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/scripts/build.js
View File

@ -120,11 +120,11 @@ build.imageview = function(data, visibleControls) {
if (hasMedium===false) { 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 { } 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'>`
} }

26
src/styles/_imageview.scss
View File

@ -21,21 +21,25 @@
right: 30px; right: 30px;
bottom: 30px; bottom: 30px;
left: 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; will-change: transform;
display: flex;
justify-content: center;
align-items: center;
animation-name: zoomIn; animation-name: zoomIn;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: $timingBounce; animation-timing-function: $timingBounce;
@media (max-width: 640px) { @media (max-width: 640px) {
top: 60px;
right: 20px; right: 20px;
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
max-width: calc(100% - 40px);
max-height: calc(100% - 80px);
} }
} }
@ -44,20 +48,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
}
#image > div {
width: 0;
height: 0;
}
#image img {
position: absolute;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
} }
// Previous/Next Buttons -------------------------------------------------------------- // // Previous/Next Buttons -------------------------------------------------------------- //