diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue index 758a187..c83e675 100644 --- a/src/components/Gallery.vue +++ b/src/components/Gallery.vue @@ -44,7 +44,7 @@ export default { }, computed: { offset() { - return `margin-left: -${this.activeImage * 100}vw`; + return `margin-left: -${this.activeImage * 100}%`; } }, methods: { @@ -127,10 +127,11 @@ export default { flex: 0 0 100%; display: flex; - flex-flow: row wrap; + flex-flow: column nowrap; justify-content: center; width: 100vw; + height: 100%; margin: 0; padding: 0 2em; @@ -139,15 +140,25 @@ export default { } } + picture { + flex: 0 1 auto; + text-align: center; + max-height: 80%; + } + img { max-width: 100%; - max-height: 90%; + max-height: 100%; object-fit: contain; } figcaption { - flex: 0 0 100%; + flex: 1 0 auto; text-align: center; + + p { + margin: 0.5em auto; + } } }